2

Why does w3schools say that when we write anchor pseudo-classes in CSS we should write a:link first then a:visited followed by a:hover and finally a:active to be effective?

From: https://www.w3schools.com/css/tryit.asp?filename=trycss_link

How does the order of pseudo-classes effect the effectiveness?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
wei
  • 937
  • 2
  • 14
  • 34

2 Answers2

4

Because there is a priority order.

if hover was before visited, then hover wouldn't get ever applied, because it would be "forever" overwritten by visited style (if it has been really visited), that was applied after.

Same goes for :active (mouse down) - if it's defined before hover, then hover will always overwrite :active(mouse down)

Makes sense?

On the other hand, this is just "conventional rule" - it is not forced. If anyone wants to have :visited higher priority, overriding :hover/:active - you are free to do so - it simply would be just unconventional

And lastly, it is not only order that plays the role of style priority.

Elements that are more explicitly defined have higher priority. Styles that are !important will have higher priority than explicitly defined styles.

Explicitly defined styles with !important and set last will have "ultimate" priority.

To question "Why would you want to use these to override styles? Wouldn't it be better just to make styles in your CSS file correctly ordered?" - Reason to use overrides by more explicit definition and !important priority overrides comes handy when you use large css/theme/bootstrap, that you haven't created and you have to quickly override/change some stuff... These dirty overrides come as a quick/cheap (not very pretty) solution.

.theBad:active {
  color: red;
}

.theBad:hover {
  color: green;
}

.theGood:hover {
  color: green;
}

.theGood:active {
  color: red;
}
<a href="#" class="theGood">the Good</a> - this will turn red on mouse down
<br />
<a href="#" class="theBad">the Bad</a> - this poor little thing will not

<!--#ordermatters, The Ugly is lurking somewhere in the shadows-->
Adam K.
  • 888
  • 6
  • 18
  • i will add a demonstration snippet – Adam K. Mar 30 '17 at 13:05
  • 1
    Nicely demonstrated. Just to add to that: "... **LVHA-order:** :link — :visited — :hover — :active. The :focus pseudo-class is usually placed right before or right after :hover, depending on the expected effect." https://developer.mozilla.org/en/docs/Web/CSS/:link – UncaughtTypeError Mar 30 '17 at 13:13
  • I extended my answer a little bit, that not just style order matters, but also how explicitly are they defined. – Adam K. Mar 30 '17 at 13:23
  • Ah yes, specificity is crucial to understanding how CSS qualifies styles, the `!important` declaration is your go-to "over-qualifier". – UncaughtTypeError Mar 30 '17 at 13:28
0

From SitePoint

This isn’t the only useful order, nor is it in any way the “right” order. The order in which you specify your pseudo-classes will depend on the effects you want to show with different combinations of states.

darronz
  • 903
  • 9
  • 17