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

by

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…

More Related Contents:

  1. how do I make device specific selectors in css [closed]
  2. Is there a “previous sibling” selector?
  3. What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?
  4. CSS selector for first element with class
  5. What does the “+” (plus sign) CSS selector mean?
  6. How are the points in CSS specificity calculated
  7. Is there a CSS selector by class prefix?
  8. CSS selector for “foo that contains bar”? [duplicate]
  9. How do I select an element based on the state of another element in the page with CSS?
  10. Does the order of classes listed on an item affect the CSS?
  11. Select all child elements recursively in CSS
  12. CSS “and” and “or”
  13. Using the last-child selector
  14. CSS selector for attribute names based on a wildcard
  15. How can I select an nth child without knowing the parent element?
  16. Can I use variables for selectors?
  17. How to select label for=”XYZ” in CSS?
  18. In which direction do selector engines read, exactly?
  19. Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?
  20. CSS Selector for
  21. What’s the difference between html[lang=”en”] and html:lang(en) in CSS?
  22. How can I apply styles to multiple classes at once?
  23. Can I colour backgrounds of selected items in HTML select options with CSS only?
  24. CSS3 combining selectors with OR instead of AND
  25. Why doesn’t this CSS :not() declaration filter down?
  26. Should I use single colons (:) or double colons (::) for before, after, first-letter and first-line pseudo-elements?
  27. How to show the first N elements of a block and hide the others in css?
  28. What is the difference between :before and ::before?
  29. What is the difference between pseudo-classes and pseudo-elements?
  30. Shorten verbose CSS that repeats combinations of elements and pseudo-classes

Leave a Comment