Pseudo-classes

So far, all the selectors have been based on elements within the document tree. However, there are times when you may want to style something where there is no CSS selector available, like the state of a hyperlink (eg. active or visited).

Pseudo-classes allow you to format items that are not in the document tree. They include:

Styling links

With pseudo-classes, you can style links in different ways in each of the four states.

a:link is the selector for normal links
a:visited is the selector for visited links
a:hover is the selector for hover state
a:active is the selector for active links

Due to specificity, the selector that appears later in the stylesheet will be used if there is any conflict. For this reason, link and link pseudo class selectors should always be used in the following order.

a {}
a:link {}
a:visited {}
a:hover {}
a:active {}

All of the usual properties can be used on these four states. You can also combine states if needed, as long as the order (link and visited before hover and active) is maintained:

a:link, a:visited { color: blue; }
a:hover, a:active { color: red; }

When styling the four link states you should be aware that modifying standard hyperlink behavior (such as underlines) can be confusing for some users, who may not realise that the item is a link.

The link pseudo-classes are well supported across modern standards-compliant browsers. However, pseudo-classes on other elements are not supported by Windows Internet Explorer 5, 5.5 and 6.

Further information

Pseudo elements »

Other Max Design articles and presentations
Associated with webstandardsgroup.org