CSS Pseudo-classes
What are Pseudo-classes?
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus
Syntax
selector:pseudo-class {
property: value;
}
Anchor Pseudo-classes
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.
CSS - The :first-child Pseudo-class
The :first-child pseudo-class matches a specified element that is the first child of another element.
p:first-child {
color: blue;
}
<p>UP</p>
<p>This is some text.</p>
the selector matches any <p> element that is the first child of any element:
Match the first <i> element in all <p> elements
p i:first-child {
color: blue;
}
<p>I am a <i>UP</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>Delhi</i> person. I am a <i>strong</i> person.</p>
Match all <i> elements in all first child <p> elements
p:first-child i {
color: blue;
}
<p>I am a <i>UP</i> person. I am a <i>Delhi</i> person.</p> color
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
CSS - The :lang Pseudo-class
The :lang pseudo-class allows you to define special rules for different languages.
No comments:
Post a Comment