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:
:link: Styles unvisited links.:visited: Styles visited links.:hover: Styles an element when the cursor is hovering over it. IE6 supports this only on links. Other browsers in widespread use support it on all elements.:active: Styles an element at the moment it is being clicked. IE6 and IE7 support this only on links.:focus: Styles an element if it has the current focus. Not supported by IE6 or IE7.:first-child: Styles an element that is the first child of its parent. For example,li:first-childapplies a style to the first list item in an ordered or unordered list. It also applies the same style to the first item in each nested list, because it will be the first child of the nested parent. Howeverp:first-childwould apply only to the first paragraph in a page or<div>if nothing else precedes it. If it is preceded by a heading, it is no longer the first child of its parent, so the style would not apply. Not supported by IE6.:lang(): Styles an element based on its language (if identified in the HTML markup). See the CSS 2.1 specification for details.
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:
:first-letter: Styles the first letter of an element, e.g.,p:first-letterdefines a style for the first letter of every paragraph.:first-line: Styles the first line of an element, e.g.,p:first-linedefines a style for the first line of every paragraph. The length of the line is determined by where the browser wraps the text onto the next line.:before: Used in conjunction with thecontentproperty, this adds generated content before an element. See Chapters 8 and 12 for a detailed description. Not supported by IE6 or IE7.:after: Same as :before, but adds generated content after an element. Not supported by IE6 or IE7.