O'Reilly logo

Cascading Style Sheets: The Definitive Guide, Second Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required