Skip to main content

Getting StartED with CSS

Pseudo-Classes and Pseudo-Elements

In spite of their odd-sounding names, these selectors are very easy to use. A pseudo-class is applied automatically by the browser, depending on certain conditions. The most useful pseudo-classes allow you to style links in different ways depending on whether the link has been visited or the mouse is hovering over it. Similarly, pseudo-elements depend on an element’s place in your page layout, such as the first letter or line of a paragraph.

The selector names all begin with a colon (:).

Pseudo-classes

The CSS2.1 specification defines following pseudo-classes:

When used with links, the pseudo-classes should be used in the same order as presented here. Otherwise, they will fail to work.

There are also three pseudo-classes for print styles: :left, :right, and :first. They are currently supported only by IE8 and Opera. See “Setting page margins with the @page rule and pseudo-classes” in Chapter 12 for a detailed description.

Pseudo-elements

A pseudo-element is not identified as such by HTML markup. It is used to apply styles to content based on its position in the HTML hierarchy. The CSS2.1 specification defines the following pseudo-elements: