views:

106

answers:

3

To my understanding, the CSS specificity rules indicate that a pseudo selector 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"&gt;A link... why is it red?</a>  
        </p>
    </div>

    <div class="foobar">
        <p>
          <a href="http://somecrazyurlwierdthing.com"&gt;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.

+2  A: 

Specificity for each:

a:link 0,0,1,1

div p a 0,0,0,3

a:link wins.

Rob Flaherty
According to the CSS spec link above: "li:first-line /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */"Unless the spec has a typo or ":first-line" is less specific than ":link", I "a:link" should be 0,0,0,2.
timmfin
See my answer, :first-line is a pseudo-element, not a pseudo-class!
Gab Royer
As Gab said, :link is a pseudo-class. the specificity for a:link is 0,0,1,1.
Rob Flaherty
This seems like a good short, to-the-point answer, except what are these sets of four numbers?
DarenW
Darren - Specificity is calculated as an array of 4 values. The first awards specificity for inline styles, the second for ID selectors, the 3rd for class selectors, and the 4th for element selectors. The values decline in weight as you move from left to right. So an ID selector with a specificity of 0,0,1,0 will beat a selector with 5 element simple selectors 0,0,0,5.Playing around with the specificity calculator is the best way to get a good idea of how specificity works:http://www.suzyit.com/tools/specificity.php
Rob Flaherty
Rob - I am enlightened!
DarenW
+4  A: 

The thing is :link isn't a pseudo-element like :first-line, it's a pseudo-class and thus counts as a class for the specificity.

Source

Gab Royer
+5  A: 

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.

NickFitz
Yes, I didn't realize there is a difference between a pseudo selector and a pseudo-class. Maybe there is a reason why a pseudo-class has a higher weight, but at least in my case, it seems to make coding generic "a:link" styles more difficult.I think I'll just change the wordpress template I'm editing to use "a { color: XXX }" instead of "a:link { color: XXX".
timmfin
Remember that an `a` element doesn't have to be a link; it can be an anchor instead, to be linked *to* via a URL fragment. This is the primary reason for the `:link` and related pseudo-classes: to allow `a` elements that are links to be distinguished from those which are not. Also consider use the appropriate pseudo-classes (`:link`, `:visited`, `:hover`, `:focus` and `:active`) to improve usability by reflecting the state of the user's interaction with the page/site; I myself particularly dislike pages with a number of links that don't define a distinct style for `:visited`.
NickFitz