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

Asked 10/9, 2011 at 12:39 Answered 4/3, 2016 at 15:5

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

Mckoy answered 10/9, 2011 at 12:39 Comment(5)

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. – Nitza 10/9, 2011 at 12:42

possible duplicate of CSS: Understanding the selector's priority / specificity – Nitza 10/9, 2011 at 12:43

Yes, but the more specific style does not apply to a:hover, thus the question. – Paraprofessional 10/9, 2011 at 12:50

Jon, That doesn't explain why .foo a:link or .foo a:visited would trump a:hover. – Mckoy 10/9, 2011 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. – Ravishing 10/9, 2011 at 16:31

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

Lachlan answered 10/9, 2011 at 12:59 Comment(12)

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. – Mckoy 10/9, 2011 at 13:7

@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. – Lachlan 10/9, 2011 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. – Mckoy 10/9, 2011 at 13:16

@Susam: Yes it does. Read my answer - it explains it. – Roshelle 10/9, 2011 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: w3.org/TR/CSS21/cascade.html#specificity – Lachlan 10/9, 2011 at 13:18

@Lachlan I guess that answers it. Thanks. – Mckoy 10/9, 2011 at 13:26

"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? – Roshelle 10/9, 2011 at 13:51

@Abraham: Let's just say I always keep a tab open with SO ;) – Lachlan 10/9, 2011 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. – Roulade 25/6, 2012 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). – Lachlan 25/6, 2012 at 16:11

Fix all the answers! :) – Roulade 25/6, 2012 at 22:9

@thirtydot: OK. – Lachlan 25/6, 2012 at 23:25

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)

Carboloy answered 4/3, 2016 at 15:5 Comment(2)

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 – Cigarillo 28/10, 2017 at 9:6

@Cigarillo To add to your comment, Love-Funck-Hate is a better mnemonic, where funck stands for focused state. – Carboloy 3/8, 2021 at 18:48

-2

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

Roshelle answered 10/9, 2011 at 13:17 Comment(2)

@Susam: Sorry. Add !important after the color value for the hover/active rule, too. (Demo:jsfiddle.net/EdYPU) – Roshelle 10/9, 2011 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 :) – Lachlan 10/9, 2011 at 13:26

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags