Anchor pseudoclasses

There are several pseudoclasses that can be used to apply styles to various states of a link:

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

Similar to their body attribute counterparts in the body element, :link applies to hypertext links that have not been visited, :visited applies to links to pages that have been visited, and :active applies during the act of clicking. The difference is that you can do much more than just change color with CSS. Following are popular rules for turning off the underline under linked text.

    a:link {color: red; text-decoration: none;}
    a:visited {color: blue; text-decoration: none;}

The :hover selector is used to create rollover effects in which the link changes in appearance when the mouse pointer moves over it. The examples above turned off underlines for links. The following rule uses :hover to make the underline appear as a rollover.

    a:link {color: red; text-decoration: none;}
    a:hover {color: red; text-decoration: underline;}

Tip

According to CSS 2, :active and :hover may be used with elements other than anchors, but this use is not supported in Internet Explorer (through Version 6) or Netscape 4.

Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.