Why does the :link pseudo class break expected CSS specificity rules?
css, css-selectors
Solution
The specification you link to states that a pseudo-class (`:link` in this case) has higher specificity than an element name. To be precise, using the a-b-c-d format, your three selectors come out as:
a-b-c-d
0 0 1 1
0 0 0 3
0 0 1 3
Your confusion possible comes from your use of the term "pseudo selector" which fails to recognise the distinction between pseudo-classes such as `:link` and pseudo-elements such as `:first-line`.
Problem
To my understanding, the CSS specificity rules indicate that a pseudo class has the same weight as a tag selector. So a selector like "div p a" would be more specific than "a:link". But as the following test case demonstrates, that does not seem to be the case. Why is the link red? ``` <!DOCTYPE HTML> <html> <head> <title></title> <meta charset="UTF-8"> <style type="text/css" media="screen"> a:link { color: red; } div p a { color: green; } div.foobar p a { color: green; } </style> </head> <body> <div> <p> <a href="http://somecrazyurlwierdthing.com">A link... why is it red?</a> </p> </div> <div class="foobar"> <p> <a href="http://somecrazyurlwierdthing.com">But it turns green when you add a class selector.</a> </p> </div> </body> </html> ``` Edited the example to include the "div.foobar p a" selector.