16

According to W3 Schools the order that the pseudo classes on the anchor element are declared is vitally important.

Why is this? Are there any others?

Volker E.
  • 5,911
  • 11
  • 47
  • 64
BanksySan
  • 27,362
  • 33
  • 117
  • 216
  • 2
    http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes – dsgriffin Jun 07 '13 at 23:47
  • Another example of why going to the specs is not the worst place to start and the importance of W3Fools http://www.w3fools.com/ & stackoverflow hopefully overtaking the first position in the search results soon. – Volker E. May 04 '15 at 15:25

1 Answers1

20

There is a detailed description here:

http://meyerweb.com/eric/css/link-specificity.html

It is related to CSS specificity.
Citing from there:

All of them can apply to a hyperlink, and in some cases, more than one will apply. 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. Now consider a hyperlink which has been visited. It will always and forever be purple, because its "visited" style beats out any other state, including "active" and "hover."
 
This is why the recommended order in CSS1 goes like this:

A:link
A:visited
A:hover
A:active

BTW W3 Schools is not the best resource for formal definitions. You are better off going to the source, at w3c. For example, it is not "vitally important", but it is recommended.

Community
  • 1
  • 1
Andy G
  • 19,232
  • 5
  • 47
  • 69
  • 10
    You can use LoVe-HAte if it helps ;) – Andy G Jun 07 '13 at 23:44
  • I was just thinking of a good mnemonic. That's a good one! Thank you again. – BanksySan Jun 07 '13 at 23:46
  • There is `A:focus` pseudo class as well. So you need to make that `LoVe For HAte` – RBT Nov 08 '17 at 11:34
  • `:focus` is not specific to a-tags, and it is only the four pseudo-classes listed that should appear in the specified order. (I suppose you could include it in the phrase as a reminder that it is available,but it doesn't need to appear between visited and hover, so I would find this a little confusing.) – Andy G Nov 08 '17 at 12:51