B.2 Pseudo-Classes and Pseudo-Elements

B.2.1 :active

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

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

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

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

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

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