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/

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/

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.