How is a selector element more specific than an identifier selector?

Question

As I understand it, the elements are the least specific. (vs id element). Please help me in understanding the specifics of selectors in general.

<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 specifics, read The Specificity Wars . Theres a handy checklist too:

So a type selector #foowould have specificity 1,0,0, while an element selector, such as p, would have specificity 0,0,1. Of these two, the ID selector will “win” because 100more than 1.

(), , : http://www.standardista.com/css3/css-specificity/

Answer 2

( ), . , :

div
#firstDiv

:

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

, :

• , #container

• (), div;

• , :last-of-type; :not()

. , , > , .

"" , , .