Cascading Style Sheets/Hyperlinks

From Wikibooks, open books for an open world
Jump to: navigation, search

The a selector matches hyperlinks. There are the four pseudo-classes that are commonly used with it: link, visited, hover and active. Rules using these pseudo-classes should be given in this order so that the dynamic effects take precedence over the visited/unvisited state. The following example will display a link that is black, changes to green when the mouse is over it, and changes to pink when active (whilst the mouse is pressed over it).

a:link
 { color:black; background:gray }
a:visited
 { color:black; background:red }
a:hover
 { color:green }
a:active
 { color:pink }

When the mouse is over an unvisited link both the a:link selector and the a:hover selector are matched. Since the hover rule appears last its color declaration takes precedence over the link rule's color declaration. Since the hover rule does not alter the background property the result is green text on a gray background.

The :link and :visited pseudo-classes can only be used with the a selector. CSS2.1 allows the :hover and :active pseudo-classes to be used with other elements. However, Internet Explorer only allows :hover on anchor elements.