CSS Pseudo-classes
CSS pseudo-classes are used to add special effects
to some selectors.
Examples
Hyperlink
This example demonstrates how to add different colors to a hyperlink in a
document.
Hyperlink 2
This example demonstrates how to add other styles to hyperlinks.
Hyperlink: use
of :focus
(does not work in IE)
This example demonstrates how to use the :focus pseudo-class on a hyperlink.
:first-child
- change first child <p>
This example sets any <p> element that is the first child
of any element to blue.
:first-child
- change first child <i> in all <p> elements
This example sets the first <i> element in all <p> elements to blue.
:first-child
- change all <i> elements in first child <p>
This example sets any <i> elements in first child
<p> elements to blue.
:lang (does not
work in IE)
This example demonstrates the use of the :lang pseudo-class.
Syntax
The syntax of pseudo-classes:
selector:pseudo-class {property: value}
|
CSS classes can also be used with pseudo-classes:
selector.class:pseudo-class {property: value}
|
Anchor Pseudo-classes
A link that is active, visited, unvisited, or when you mouse over a link can
all be displayed in different ways
in a CSS-supporting browser:
a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */
|
Note: a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective!!
Note: a:active MUST come after a:hover in the CSS
definition in order to be effective!!
Note: Pseudo-class names are not case-sensitive.
Pseudo-classes and CSS Classes
Pseudo-classes can be combined with CSS classes:
a.red:visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
|
If the link in the example above has been visited, it will be displayed in red.
CSS2 - The :first-child Pseudo-class
The :first-child pseudo-class matches a specified element that is the first child of
another
element.
Note: For :first-child to work in IE a <!DOCTYPE> must be declared.
Match the first <p> element
In the following example, the selector matches any <p> element that is the first child
of any element:
<html>
<head>
<style type="text/css">
p:first-child
{
color:blue
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
|
Try it yourself!
Match the first <i> element in all <p> elements
In the following example, the selector matches the first <i> element in
all
<p> elements:
<html>
<head>
<style type="text/css">
p > i:first-child
{
font-weight:bold
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
|
Try it yourself!
Match all <i> elements in all first child <p> elements
In the following example, the selector matches all <i> elements in
<p> elements that are the first child of another element:
<html>
<head>
<style type="text/css">
p:first-child i
{
color:blue
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
|
Try it yourself!
CSS2 - The :lang Pseudo-class
The :lang pseudo-class allows you to define special rules for different
languages. In the example below, the :lang class defines the type of quotation
marks for q elements with a lang attribute with a value of "no":
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>
</html>
|
Pseudo-classes
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: The number in the "W3C" column indicates in which CSS recommendation
the property is defined (CSS1 or CSS2).
Pseudo-class |
Purpose |
IE |
F |
N |
W3C |
:active |
Adds special style to an activated element |
4 |
1 |
8 |
1 |
:focus |
Adds special style to an element while the element has
focus |
- |
1.5 |
8 |
2 |
:hover |
Adds special style to an element when you mouse over it |
4 |
1 |
7 |
1 |
:link |
Adds special style to an unvisited link |
3 |
1 |
4 |
1 |
:visited |
Adds special style to a visited link |
3 |
1 |
4 |
1 |
:first-child |
Adds special style to an element that is the first child of some other element |
7 |
1 |
7 |
2 |
:lang |
Allows the author to specify a language to use in a specified element |
- |
1 |
8 |
2 |
|