|
CSS pseudo-classes are used to add special
effects to some selectors.
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.
In this example, the selector matches any p
element that is the first child of a div element,
and indents the first paragraph inside a div element:div > p:first-child
{
text-indent:25px
}
This selector will match the first paragraph inside
the div in the following HTML:
<div>
<p>
First paragraph in div.
This paragraph will be indented.
</p>
<p>
Second paragraph in div.
This paragraph will not be indented.
</p>
</div>
but it will not match the paragraph in this HTML:
<div>
<h1>Header</h1>
<p>
The first paragraph inside the div.
This paragraph will not be indented.
</p>
</div>
|
In this example, the selector matches any em
element that is the first child of a p element, and
sets the font-weight to bold for the first em inside a p
element:p:first-child em
{
font-weight:bold
}
For example, the em in the HTML below is the first
child of the paragraph:
<p>I am a <em>strong</em> man.</p>
|
In this example, the selector matches any a
element that is the first child of any element, and
sets the text-decoration to none:a:first-child
{
text-decoration:none
}
For example, the first a in the HTML below is the
first child of the paragraph and will not be underlined.
But the second a in the paragraph is not the first child
of the paragraph and will be underlined:
<p>
Visit <a href="http://www.codedcode.com">codedcode</a>
and learn CSS!
Visit <a href="http://www.codedcode.com">codedcode</a>
and learn HTML!
</p>
|
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 |
- |
- |
- |
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 |
|
1 |
7 |
2 |
| :lang |
Allows the author to specify a language
to use in a specified element |
|
1 |
8 |
2 |
|
