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;}