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/

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

Felix Kling
– Felix Kling

2012-02-16 12:26:03 +00:00
Commented Feb 16, 2012 at 12:26 — Felix Kling
– Felix Kling, Commented Feb 16, 2012 at 12:26

Mathias Bynens · Accepted Answer · 2012-02-16 12:31:22Z

18

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/

edited Feb 16, 2012 at 12:31

answered Feb 16, 2012 at 12:25

Mathias Bynens

151k54 gold badges224 silver badges254 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

BoltClock Over a year ago

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

Shawn Taylor Over a year ago

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

Felix Kling Over a year ago

@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.

Shawn Taylor Over a year ago

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

LuckyLuke Skywalker Over a year ago

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..

BoltClock · Accepted Answer · 2012-02-16 12:39:10Z

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.

@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.
Note that Selectors spec doesn’t mention how things like style attributes influence specificity.

Collectives™ on Stack Overflow

How element selector is more specific than id selector?

2 Answers 2

5 Comments

8 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

8 Comments

Linked

Related