Cascading Style Sheets: The Definitive Guide, Second Edition

Pseudo-Classes and Pseudo-Elements

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

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

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

: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 ...