More specific CSS rule is not working

Question

In my following code, I have defined more specific rule for h1 as #inner h1 and less specific rule as #container h1 is also defined. But if #container h1 is put after #inner h1 then it takes effect and #inner h1 is ignored while it shouldn't be because its more specific.

Please help me in understanding the issue.

CSS:

#inner h1 { font-size:25px; }
#container h1 { font-size:15px; }

HTML:

<div id="container">
  <div id="inner">
    <h1>Hello World!</h1>   
  </div>
</div>

Gretel

No, #inner h1 is not more specific than #container h1. They both have a specificity of 101 (I believe, htmldog.com/guides/cssadvanced/specificity). Just because an element is INSIDE another element doesn't make the one inside be more specific. – Huysmans

@Charlie: Note that it's not literally one hundred and one - 11 class selectors, for example, won't override a single ID selector. It's more like one-zero-one. – Blau

Answer 1

It might be that your idea of specificity is a little off. Specificity has to be a context-free idea: since CSS can be loaded independently of HTML, you must not need an HTML document to guess which rule is more "specific". Consider this other valid example:

<div id="inner">
  <div id="container">
    <h1>Hello World!</h1>   
  </div>
</div>

With this snippet, you would have to go against your initial guess that inner should be more specific. This means that your interpretation required context (which CSS does not have).

The point is, both rules are seen with equal specificity (h1 descendants of an element identified by an id), and the selector doesn't give higher priority to closer descendants.

In case two rules of equal specificity apply, the winner is the last one declared in the CSS.

Shabuoth

Another thing: combinators don't contribute to specificity at all, so swapping the space for a > won't affect which rule takes precedence, because both combinators are of no specificity. See this question – Blau

Answer 2

Those both have the same specificity and as you note, the order they appear in the style sheet is the determining factor for which style rules are applied.

There are a variety of ways you could structure the rules to gain more specificity but in general I'd stay away from the !important modifier.

For more information see 6.4.3 Calculating a selector's specificity in the W3's CSS spec.

Berar

Isn't #inner h1 more specific? – Gretel

There's also a helpful article on selector specificity (there was a question similar to this yesterday), htmldog.com/guides/cssadvanced/specificity – Huysmans

@ShawnTaylor no, those two have the same specificity. – Berar

Answer 3

this is not an issue at all :) CSS parses classes one after another and the last rule overrides previous, of course if the previous is not more specific or does not include !important statements in it, you can put font-size: 25px !important; in the first so that it overrides the last rule, otherwise just change places of classes

Photogenic

Isn't #inner h1 more specific? – Gretel

@Shawn, they're equal both in length and selectors themselves, if you had div#inner h1 that would be more specific – Photogenic

@Mr. BeatMasta, I know but I didn't think that this question had anything to do with classes. – Torrential

@grc, umm I consider anything like #container h1 {} a class declaration in css, don't you? – Photogenic

@Mr. BeatMasta, class in css makes me think of .container so your post was a bit confusing – Torrential

that's not class, that's a class selector for class="" attribute of html, what refers to class="" contents I consider that className rather than "class", and everything is inside {} is a class declaration – Photogenic

"everything is inside {} is a class declaration" I think most people consider that a styling rule. – Strychninism