Home/ Questions/Q 6556557
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T12:57:36+00:00

Sample code: http://jsfiddle.net/RuQNP/ <!DOCTYPE html> <html> <head> <title>Foo</title> <style type=text/css> a:link, a:visited { color:

  • 0

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>

What I was expecting:

The link would appear red on hover.

What I get:

The link appears green on hover.

Questions:

  1. Why does the color defined in .foo a:link, .foo a:visited
    selector override the one in a:hover, a:active? What’s going on?
  2. I understand that I can fix it and get what I expect by uncommenting
    the commented code. However, I want to know how can we correct the
    .foo a:link, .foo a:visited selector such that it does not
    override the color defined in a:hover, a:active?

If I understand http://www.w3.org/TR/CSS21/cascade.html#specificity properly (Thanks, BoltClock), this is the specificity table for the various 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

So, the style defined for .foo a:link overrides the style for a:hover when both link as well as hover pseudo-classes apply to an A element of class foo.

Similarly, the style defined for .foo a:visited overrides the style for a:hover when both visited as well as hover pseudo-classes apply to an A element of class foo.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When you first started with CSS, you might have learned about the LoVe-HAte mnemonic for the order in which to specify link selectors (a:link, a:visited, a:hover, a:active). Have you ever wondered why this mnemonic was chosen?

    Well, there’s a note in the spec on how the link and dynamic pseudo-classes are treated when multiple rules using all of them apply to the same element, which explains why you need to set link selectors in that order:

    Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the ‘color’ property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.

    Anyway, the point I’m trying to make above is that all four pseudo-classes, being pseudo-classes, have equal specificity. Everything else about specificity applies. In this case, out of a bunch of equally specific selectors, the last rule is applied. When or how each pseudo-class is triggered is never relevant.

    Now, the simple introduction of the .foo selector causes your second set of link/visited rules to override your first set of link/visited styles and the hover/active styles, forcing links in elements with that class to always appear green until you add hover/active styles with the .foo selector.

    Sorry if my answer seems stitched-up or slipshod by the way, I’m typing this on my iPhone right now and it’s pretty hard to think out here…

    • 0