Quoting the specs is always a reliable way to explain:
a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */
a:active { color: gray } /* when element accepts tab focus */
http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes
This code snippet should handle all scenarios:
.header a,
.header a:link,
.header a:visited,
.header a:active,
.header a:hover {
color: black;
}
http://jsfiddle.net/ZgUZn/1/
A comment by Joerg mentioned that :focus
was left out, but there's a reason for it. You can decide if you need it or not after understanding why:
.header a:focus {
color: white;
background: blue;
font-size: 2em;
}
http://jsfiddle.net/ZgUZn/5/
If you visit the link and follow the instructions, you'll see how focus affects the element. Including this pseudo-class can be optional depending on browser defaults.
NOTE: There's a possibility that just using .header a
could also suffice, although it may not cover all cases as effectively as the previous method. Your feedback on this is appreciated.
EDIT
Regarding the earlier note, here's an alternative approach:
a,
a:link,
a:visited,
a:hover,
a:active {
background: green;
color: white;
font-size: 2em;
}
.header a {
color: black;
}
http://jsfiddle.net/ZgUZn/6/
The use of .header a
doesn't always override other pseudo-selectors if they've been defined elsewhere. It seems to work against the default browser settings when no other definitions exist, but further testing might be needed.