Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS?

css select parent based on child
css selectors
css parent selector
css class selector
what css rule allows you include a tag in markup but hide it from view in the browser?
which feature enables easy identification of corresponding style element?
css descendant selector
css active

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.

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...

Why should always a:hover come after a:link and a:visited? [duplicate], Given CSS selectors that are equally specific, rules are applied in order. does . foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS? For example, an unvisited link can be hovered and active at the same time as it's an unvisited link. Since three of the above rules apply to the hyperlink, and the selectors all have the same specificity, then the last one listed wins. Therefore, the "active" style will never appear, because it will always be overridden by the "hover" style.

This is how I understand it. All these pseudo classes have same specificity, so the pseudo class written at last wins. Now what do pseudo-classes :link, :visited, :focus, :hover, :active do? Let us see one by one.

a: link{color: red} tells the user agent to color the anchor element red in any state. Run the following script:

  a:link {
  color: red;
  
  }
<a href="www.stackoverflow.com">Go to stackoverflow </a>

why “a:hover MUST come after a:link and a:visited(w3school , This question already has an answer here: Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS? 3 answers I'm study CSS� Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS? css, css-selectors asked by Susam Pal on 12:39PM - 10 Sep 11 UTC

To fix it, put the .foo ... selector first and add !important to the color value for the other link/visited selector, like this:

    a:link, a:visited {
        color: blue;
    }

    a:hover, a:active {
        color: red !important; 
    }
    .foo a:link, .foo a:visited {
        color: green;
    }

The reason that the .foo a:link, .foo a:visited selector overrides the other selector no matter where you put it is that because .foo a:link is more specific than a:link. (ditto for :visited.) So the .foo ... selector will always override the a:link,a:visited selector because it has a parent class name, so it's more specific. (Also read @BoltClock's answer about LoVe - HAte - that's part of the problem.)

CSS selectors, If all conditions in the pattern are true for a certain element, the selector matches (:link) or already visited (:visited). The link pseudo-classes. E:active. E:hover E[foo], Matches any E element with the "foo" attribute set (whatever the value). selector alone, the style declarations in the second rule will override those in the � The :visited selector is used to select visited links. Tip: Use the :link selector to style links to unvisited pages, the :hover selector to style links when you mouse over them, and the :active selector to style links when you click on them. Browsers limits the styles that can be set for a:visited links, due to security issues. Allowed styles are:

CSS :visited Selector, Tip: Use the :link selector to style links to unvisited pages, the :hover selector to style links when you mouse over them, and the :active selector to style links Browsers limits the styles that can be set for a:visited links, due to security issues. a:link { ⋮ declarations } a:visited { ⋮ declarations } a:hover { ⋮ declarations } Since the :active is not so useful it is left out… or combined with a:link and a:visited… and then it is overridden by a:hover. W3C spells it out here: Note that the A:hover must be placed after the A:link and A:visited

�Por qu� .foo a: link, .foo a: visited {} selector reemplaza a: hover, a , Cuando empezaste con CSS, que podr�a haber aprendido sobre el mnem�nico de amor-odio por el orden en que para especificar los selectores de enlace� In my imaginary example there, the :visited style would override the :hover style, which is highly unlikely that is what you want. Focus is an accessibility feature, thus last because it is most important. One way to remember the order is LOVE and HATE. that is L(ink)OV(isted)E / H(over)A(Active)TE. Here is the same link we have been looking at.

html, 我有以下CSS: Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active CSS? How To Remember The Order of Selectors: LOVE and HATE� Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS? Angular: How to tell from elementRef whether element has given class applied to it? READ ALSO

Comments
  • Selectors have the concept of specificity, which means that a "more specific" selector will trump a more general one (e.g. html a.foo will trump .foo). Google it or search here on SO, there are lots of similar questions.
  • possible duplicate of CSS: Understanding the selector's priority / specificity
  • Yes, but the more specific style does not apply to a:hover, thus the question.
  • Jon, That doesn't explain why .foo a:link or .foo a:visited would trump a:hover.
  • It's kind of like the standard order of operations in math, certain selectors have precedence over others. Generic tag based styles can be overridden by class and id selector rules, and class based styles can be overridden by id selector rules.
  • But I found that moving the .foo a:link, .foo a:visited selector before the a:hover, a:active selector does not fix the issue. Here is an example: jsfiddle.net/eSc56 Even in this the color specified in .foo a:link, .foo a:visited selector overrides the one in a:hover, a:active.
  • @Susam Pal: The class selector makes it more specific, so wherever you put the rule with it it'll still override all the other rules.
  • So, you mean .class .element:pseudoclass overrides .element:another-pseudoclass? If it is so, the output makes sense. I am trying to find what in the CSS standard implies this but I have not been able to find it yet.
  • @Susam: Yes it does. Read my answer - it explains it.
  • "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..." Ha ha. Are you on SO 24/7 and that's how you got 72600 reputation?
  • For those who struggle to remember the proper ordering of pseudo classes related to a tag in a style sheet is - LoVe before HAte. Link -> Visited -> Hover -> Active
  • @Susam: Sorry. Add !important after the color value for the hover/active rule, too. (Demo:jsfiddle.net/EdYPU)
  • The !important needs to go into the HA rule only, not the LV rule. Otherwise there isn't much of a point having the .foo LV rule around at all :)