Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why do anchor pseudo-classes a:link, :visited, :hover, :active need to be in correct order? [duplicate]

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?

like image 754
BanksySan Avatar asked Jun 07 '13 23:06

BanksySan


1 Answers

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.

like image 134
Andy G Avatar answered Oct 03 '22 00:10

Andy G