CSS Pseudo-Classes

Pseudo-Classes are used to assign special effects to to ID, class and element selectors - as defined here. While a number of pseudo-classes exist, only a few of them are consistently implemented by the major web browsers.

• :link - The :link pseudo-class is used to assign style effects to a hyperlink that has not yet been visited.
• :hover - The :hover pseudo-class is used to assign style effects to an element while the mouse cursor is hovering over the element. W3C specifications do not indicate which elements should support hover effects. Hover, was originally introduced in IE5. However, IE6 now lags behind the other browsers - it only supports hover for anchor, a elements whilst Firefox and Opera support it for a whole range of elements.
• :visited - The :visited pseudo-class is used to assign style effects to a hyperlink that has been visited. Note that :visited must be defined after :hover for it to have an effect.
• :focus - The :focus pseudo-class is used to style elements whilst they are focused. Typically, these are form elements such as input. IE6 does not support this pseudo-class.
• :active - The :active pseudo-class is used to style elements whilst they are in the process of being used. :active can be used to good effect to change the appearance of buttons and anchors whilst they are being clicked. Once again, IE6 does not understand :active.
• :first-child - The :first-child pseudo-class is used to style the first instance of an element inside another element. For instance to style the first paragraph inside each document division differently you would define the selector p:first-child. This feature is not supported by IE6.

Many, but not all, of these pseudo-class behaviors have been implemented in IE7. However, they only manifest themselves if the strict HTML DTD is used. It should also be noted that the range of CSS properties that can be modified in a pseudo-class declaration is only a subset of all available properties for the class. The precise subset is browser-dependant. We have also noted that IE does not always like being given shorthand property declarations such as border:0.05em gray solid inside a pseudo-class declaration.

The fact that IE6 does not fully support pseudo-classes is truly lamentable since pseudo-classes offer an elegant way of accomplishing a number of display features such as interactive buttons, pop-down menus etc. IE7 does redress the situation but it will be a while yet before one can safely design for IE7 rather than its predecessor.

A related concept is that of pseudo-elements which enable additional effects to be applied to page layout. The :first-letter and :first-line pseudo-elements are of particular interest. As their names imply, they are used to style the first letter or line of a block element.

Finally, why the term pseudo ? The reasoning is that these specifications allow the designer access to those parts of a web page that would not otherwise be accessible via the use of standard HTML. It should be noted that many pseudo effects can be delivered by other means - by using JavaScript and/or by using inline elements such as span.