B.2 Pseudo-Classes and Pseudo-Elements
B.2.1 :active
This applies to an element
during the period in which it is being activated. The most common
example of this is clicking on a hyperlink in an HTML document:
during the time that the mouse button is being held down, the link is
active. There are other ways to activate elements, and other elements
can in theory be activated, although CSS doesn't
define this.
Type: pseudo-class
Applies to: an element that is being activated
Examples:
a:active {color: red;}
*:active {background: blue;}
B.2.2 :after
This allows
the author to insert generated content at the end of an
element's content. By default, the pseudo-element is
inline, but this can be changed using the property
display.
Type: pseudo-element
Generates: a pseudo-element containing generated content placed after
the content in the element
Examples:
a.external:after {content: " " url(/icons/globe.gif);)
p:after {content: " | ";}
B.2.3 :before
This allows
the author to insert generated content at the beginning of an
element's content. By default, the pseudo-element is
inline, but this can be changed using the property
display.
Type: pseudo-element
Generates: a pseudo-element containing generated content placed
before the content in the element
Examples:
a[href]:before {content: "[LINK] ";)
p:before {content: attr(class);}
B.2.4 :first-child
With this pseudo-class, an element is
matched only when it is the first child of another element. For
example, p:first-child will select any
p element that is the first child of some other
element. It does not, as is commonly assumed,
select whatever element is the first child of a paragraph; for that,
an author would write p > *:first-child.
Type: pseudo-class
Applies to: any element that is the first child of another element
Examples:
body *:first-child {font-weight: bold;}
p:first-child {font-size: 125%;}
B.2.5 :first-letter
This is used to style the
first letter of an element. Any leading punctuation should be styled
along with the first letter. Some languages have letter combinations
that should be treated as a single character, and a user agent may
apply the first letter style to both. Prior to CSS2.1,
:first-letter could be attached only to
block-level elements.
CSS2.1 expands its
scope to include all elements. There is a limited set of properties
that can apply to a first letter.
Type: pseudo-element
Generates: a pseudo-element that contains the first letter of an
element
Examples:
h1:first-letter {font-size: 166%;}
a:first-letter {text-decoration: underline;}
B.2.6 :first-line
This is used to style the
first line of text in an element, no matter how many or few words may
appear in that line. :first-line can be attached
only to block-level elements. There is a limited set of properties
that can apply to a first line.
Type: pseudo-element
Generates: a pseudo-element that contains the first formatted line of
an element
Examples:
p.lead:first-letter {font-weight: bold;}
B.2.7 :focus
This applies to an element
during the period in which it has focus. One example from HTML is an
input box that has the text-input cursor within it; that is, when the
user starts typing, text will be entered into that box. Other
elements, such as hyperlinks, can also have focus, although CSS does
not define which elements have focus.
Type: pseudo-class
Applies to: an element that has focus
Examples:
a:focus {outline: 1px dotted red;}
input:focus {background: yellow;}
B.2.8 :hover
This applies to an element
during the period in which it is being
"hovered." Hovering is defined as
the user designating an element without activating it. The most
common example of this is moving the mouse pointer inside the
boundaries of a hyperlink in an HTML document. Other elements can in
theory be hovered, although CSS doesn't define which
ones.
Type: pseudo-class
Applies to: an element that is in a hovered state
Examples:
a[href]:hover {text-decoration: underline;}
p:hover {background: yellow;}
B.2.9 :lang
This matches elements based on their human
language encoding. Such language information must be contained within
or otherwise associated with the document; it cannot be assigned from
CSS. The handling of :lang is the same as for
|= attribute selectors.
Type: pseudo-class
Applies to: any element with associated language-encoding information
Examples:
html:lang(en) {background: silver;}
*:lang(fr) {quotes: '« ' ' »';}
B.2.10 :link
This applies to a link to a
URI that has not been visited; that is, the URI to which the link
points does not appear in the user agent's history.
This state is mutually exclusive with the :visited
state.
Type: pseudo-class
Applies to: a link to another resource that has not been visited
Examples:
a:link {color: blue;}
*:link {text-decoration: underline;}
B.2.11 :visited
This applies to a link to a URI that has
been visited; that is, the URI to which the link points appears in
the user agent's history. This state is mutually
exclusive with the :link state.
Type: pseudo-class
Applies to: a link to another resource that has already been visited
Examples:
a:visited {color: purple;}
*:visited {color: gray;}
|