Recipe 6.2. Changing Link Colors

Problem

You want to change the colors of the links.

Solution

Use these pseudo-classes in this order: :link, :visited, :hover, and :active:

body {  color: #99ffff; } a:link {  color: #33ccff; } a:visited {  color: #cecece; } a:hover {  color: #336666; } a:active {  color: #339999; }

Discussion

The hyperlink pseudo-classes are equal in terms of priority within the cascade, so avoid the conflict by listing the selectors in the order: link, visited, hover, and active. The mnemonic device commonly used to remember the order is "LoVe/HAte."

A visited or an unvisited link can enter hover and active state at the same time. Since hyperlink pseudo-classes have the same ranking, the one listed last is what the user sees and that's why in some cases :hover won't work. When :hover appears before :active or :visited, then these hide the hover state based on the cascading rules.

Problem

Solution

Discussion

See Also