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

Question

<!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:

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

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. — Jon, Sep 10 '11 at 12:42
possible duplicate of [CSS: Understanding the selector's priority / specificity](http://stackoverflow.com/questions/4072365/css-understanding-the-selectors-priority-specificity) — Jon, Sep 10 '11 at 12:43
Yes, but the more specific style does not apply to a:hover, thus the question. — Matt Bridges, Sep 10 '11 at 12:50
Jon, That doesn't explain why `.foo a:link` or `.foo a:visited` would trump `a:hover`. — Susam Pal, Sep 10 '11 at 12:54
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. — seanmetzgar, Sep 10 '11 at 16:31

BoltClock · Accepted Answer · 2015-01-04T04:52:22.687

20

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

edited Jan 04 '15 at 04:52

answered Sep 10 '11 at 12:59

BoltClock

700,868
160
1,392
1,356

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: http://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 Sep 10 '11 at 13:07
@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. – BoltClock Sep 10 '11 at 13:12
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 Pal Sep 10 '11 at 13:16
1

@Susam: Yes it does. Read my answer - it explains it. – Abraham Sep 10 '11 at 13:18
@Susam Pal: Yes. All pseudo-classes have equal specificity. This section implies that there's no difference between any pseudo-class in terms of specificity, it's calculated simply by counting how many there are: http://www.w3.org/TR/CSS21/cascade.html#specificity – BoltClock Sep 10 '11 at 13:18
@BoltClock I guess that answers it. Thanks. – Susam Pal Sep 10 '11 at 13:26
2

"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? – Abraham Sep 10 '11 at 13:51
@Abraham: Let's just say I always keep a tab open with SO ;) – BoltClock Sep 10 '11 at 15:15
Why are you updating `/CSS2/` to `/CSS21/`? Don't they link to the same document? I'm really just wondering whether I should go update my own answers. – thirtydot Jun 25 '12 at 15:56
@thirtydot: Actually, yeah they do. You don't have to update your answers — I'm just pretty anal when it comes to my answers (and sometimes the questions I answer). – BoltClock Jun 25 '12 at 16:11
[Fix all the answers!](http://stackoverflow.com/search?q=user%3A106224+url%3A%22*CSS2%2F*%22&submit=search) :) – thirtydot Jun 25 '12 at 22:09
@thirtydot: [OK.](http://stackoverflow.com/search?q=user%3A106224+url%3A%22%2ACSS21%2F%2A%22&submit=search) – BoltClock Jun 25 '12 at 23:25

user31782 · Answer 2 · 2016-03-04T17:12:01.307

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>

The anchor element is colored red in the following states if and only if the link is unvisited,

Unvisited
hovered
Focused(Tabbed)
Active(Clicked)

So, a: link{color: red} tells the user agent to give red color to anchor element in all of the above states. Now let's compare it with a:hover pseudo-class. Run the following script

a:hover {
  color: red;
  
}

<a href="www.stackoverflow.com">Go to stackoverflow </a>

The anchor element is colored red in the following states,

hovered
Active(clicked)

We see that both :link and :hover pseudo classes are capable to define the hover state -- So if you assign these two pseudo-classes to a particular element then the one mentioned at last in the css file wins. This is the reason we say :link will override :hover when the former is mentioned below the later. The same concept holds for other pseudo-classes. I'd like to give list of what every pseudo class do.

a:link {...} sets the following states of an unvisited link
- Focused(Tabbed)
- hovered
- Active(Clicked)

link state will override every other state.

a:visited {...} sets the following states of a visited link:
- Focused(Tabbed)
- hovered
- Active(Clicked)

a:visited {...} will override every other state except :link if and only if the link has been visited.

Note that visited means it must be considered visited as per user agent's cache. E.g. a website visited 10 days ago might not be in user agent's cache then it'd be technically considered unvisited.

a:focus {...} sets the following states for both visited and unvisited links:
- Focused(Tabbed)
- hovered
- Active(Clicked)

a:focus {...} overrides :hover and :active states.

a:hover {...} sets the following states to both visited and unvisited links:
- hovered
- Active(Clicked)

a:hover {...} overrides :active state

a:active {...} sets the following states for both visited and unvisited links:

Active(Clicked)

For those who struggle to remember the proper ordering of pseudo classes related to `a` tag in a style sheet is - **L**o**V**e before **HA**te. `Link` -> `Visited` -> `Hover` -> `Active` — RBT, Oct 28 '17 at 09:06
@RBT To add to your comment, `Love-Funck-Hate` is a better mnemonic, where `funck` stands for `focused` state. — user31782, Aug 03 '21 at 18:48

Abraham · Answer 3 · 2011-09-10T13:35:51.033

-1

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

edited Sep 10 '11 at 13:35

answered Sep 10 '11 at 13:17

Abraham

20,316
7
33
39

@Susam: Sorry. Add `!important` after the color value for the hover/active rule, too. (Demo:http://jsfiddle.net/EdYPU/) – Abraham Sep 10 '11 at 13:23
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 :) – BoltClock Sep 10 '11 at 13:26

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

3 Answers3

Linked

Related