Geek Answers Handbook

Why: a pseudo-alias: a break in anticipation of CSS-specific rules?

As far as I understand, CSS-specific rules indicate that the pseudo-class has the same weight as the tag selector. Thus, a div pa selector will be more specific than a: link.

But, as the following test case shows, this 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 pa { color: green; } div.foobar pa { 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>

An example of the inclusion of the "div.foobar pa" selector has been edited.

+6
css css-selectors
source share
3 answers

The specification you refer to indicates that the pseudo-class ( :link in this case) has higher specificity than the name of the element. To be precise, using the abcd format, your three selectors look like this:

 abcd 0 0 1 1 0 0 0 3 0 0 1 3

Your confusion is possible from your use of the term "pseudo-selector", which cannot distinguish between pseudo-classes such as :link and pseudo-elements such as :first-line .

+6
source share

Thing :link not a pseudo-element like :first-line , it is a pseudo-class and, therefore, is considered as a class for specificity.

A source

+5
source share

Specificity for each:

a: link 0,0,1,1

div pa 0,0,0,3

a: link wins.

+2
source share

More articles:


All Articles