CSS Pseudo Classes and Browser Support

This is an extract from CSS Master: Advanced Web Standards Solutions:

Pseudo-Classes

There are instances where you may want to style an element based on something other than the structure of the document—for instance, the state of a link or form element. This can be done using a pseudo-class selector.

/* makes all unvisited links blue */
a:link {color:blue;}

/* makes all visited links green */
a:visited {color:green;}

/* makes links red when hovered or activated.
focus is added for keyboard support */
a:hover, a:focus, a:active {color:red;}

/* makes table rows red when hovered over */
tr:hover {background-color: red;}

/* makes input elements yellow when focus is applied */
input:focus {background-color:yellow;}

:link and :visited are known as link pseudo-classes and can only be applied to anchor elements. :hover, :active, and :focus are known as dynamic pseudo-classes and can theoretically be applied to any element. Most modern browsers support this functionality. Unsurprisingly, IE 6 only pays attention to the :active and :hover pseudo-classes when applied to an anchor link, and ignores :focus completely.

IE7 supports :hover on arbitrary elements but ignores :active and :focus.

Last, it's worth pointing out that pseudo-classes can be strung together to create more complex behaviors, such as styling the hover effect on visited links different from those on unvisited links.

/* makes all visited linkes olive on hover */
a:visited:hover {color:olive;}