How element selector is more specific than id selector?

Question

As I understand elements are least specific. (element vs id). Please help me in understanding the specificity of selectors generally.

<div id="container">
    <div id="firstDiv">FIRST Div inside CONTAINER</div>
    <div id="secondDiv">SECOND Div inside CONTAINER</div>
</div>

body{
    width: 780px;
    margin: 20px auto;
}
#container > div:not(:last-of-type){
    margin-bottom: 0px; /*How its more specific than ID selector below? */
}
#container {
    border: 15px solid orange;
    padding: 10px;
}
#firstDiv{
    margin: 50px; /*This is not taking effect*/
    border: 5px solid blueviolet;
}
#secondDiv{
    border: 5px solid brown;    
}

http://jsfiddle.net/t2RRq/

Eras

Have a look at w3.org/TR/CSS2/cascade.html#specificity. – Hagbut

Answer 1

To understand CSS specificity, read The Specificity Wars. There’s a handy reference sheet, too:

So, a selector like #foo would have 1,0,0 specificity, while an element selector like p would have 0,0,1 specificity. Out of these two, the ID selector would “win” as 100 is greater than 1.

A more specific (heh) version which also includes pseudo-elements and pseudo-classes can be found here: http://www.standardista.com/css3/css-specificity/

Imago

How on earth have I not seen this?! This is brilliant. – Elman

Specificity doesn't count ">" for direct child in its formula? – Eras

@Shawn: Have a look at the last picture, where it says: *,+,>,~: The universal selector has no value and combinators do not increase specificity. Also I assume you have had a look at the specs by now and it is clearly defined how the specificity is computed, so no, it does not count. – Hagbut

@FelixKling: Thanks for making me understand all this concept easily. – Eras

Nonetheless chrome just decided to ditch all these rules and make my previously specified parent div color show instead of the id color. Troubleshooting incoming.. – Mcgurn

Answer 2

When applying rules, selector specificity is calculated by counting all simple selectors (linked by any combinators), and not just the key selector. That means you're not just comparing these two selectors:

div
#firstDiv

But you're comparing these two selectors:

#container > div:not(:last-of-type)
#firstDiv

Here, the first selector is more specific because it has:

• An ID selector, #container

• A type (element) selector, div; and

• A pseudo-class, which in this case is :last-of-type; the :not() pseudo-class itself doesn't count toward selector specificity

Whereas the second selector only consists of an ID. Note that combinators themselves like > in your first example don't count toward selector specificity.

There is an entire section in the Selectors spec covering how to calculate selector specificity.

Elman

@ShawnTaylor There is. See my answer. – Imago

@Shawn: Yes see the link in my comment. #container > div:not(:last-of-type) is 0-1-0-2 and #firstDiv is 0-1-0-0. – Hagbut

@FelixKling: Child symbol doesn't count anywhere? ">" – Eras

Note that Selectors spec doesn’t mention how things like style attributes influence specificity. – Imago

@Mathias: Not in this spec, but in this one. – Hagbut

@Mathias Bynens: Well, they don't. They influence the cascade. – Elman

@FelixKling Good catch! I still think it’s easier to think of selectors as fish and sharks. – Imago

@Mathias: I absolutely agree :) – Hagbut