Sample code: http://jsfiddle.net/RuQNP/
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style type="text/css">
a:link, a:visited {
color: blue;
}
a:hover, a:active {
color: red;
}
.foo a:link, .foo a:visited {
color: green;
}
/* A possible fix */
/*
.foo a:hover, .foo a:active {
color: red;
}
*/
</style>
</head>
<body>
<div class="foo">
<a href="http://example.com/">Example</a>
</div>
</body>
</html>
Anticipated Outcome:
The link would change to red upon hovering.
Actual Result:
The link changes to green when hovered over.
Inquiries:
- Why does the color specified in the selector .foo a:link, .foo a:visited override the one in a:hover, a:active? What seems to be happening?
- I grasp that I could resolve this by uncommenting the commented code. However, I'm curious about how we can adjust the .foo a:link, .foo a:visited selector so it doesn't take precedence over the color defined in a:hover, a:active?
If my comprehension of http://www.w3.org/TR/CSS21/cascade.html#specificity is correct (Thanks, BoltClock), here's the specificity table for the different selectors in the code.
a:link - 0 0 1 1
a:visited - 0 0 1 1
a:hover - 0 0 1 1
a:active - 0 0 1 1
.foo a:link - 0 0 2 1
.foo a:visited - 0 0 2 1
Therefore, the style set for .foo a:link takes precedence over the style for a:hover when both link and hover pseudo-classes are applied to an A element with the class foo.
Similarly, the style designated for .foo a:visited overrides the style for a:hover when both visited and hover pseudo-classes are applicable to an A element with the class foo.