1

For example, let's say I have this HTML:

<ul id="nav">
  <li>one</li>
  <li id="my_item">two</li>
  <li>three</li>
  <li>four</li>
</ul>

and then the CSS:

#nav li {
  margin-bottom:10px;
}

#nav #my_item {
  margin-bottom:30px;
}

Why can't I just use #my_item for that last selector?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Ryan
  • 5,883
  • 13
  • 56
  • 93

3 Answers3

5

Because CSS uses a concept called specificity to determine what rules apply to what elements.

  • 1 ID + 1 tag is more specific than 1 ID
  • 2 IDs is more specific than 1 ID + 1 tag

When checking which rule gets priority, go down the list here and stop on the first that applies:

  1. An inline style beats a non-inline style.
  2. A style with more IDs in its specification beats a style with fewer.
  3. A style with more classes/attributes in its specification beats a style with fewer.
  4. A style with more tags in its specification beats a style with fewer.
  5. All else being equal, a rule that comes later in the specification beats one that comes earlier.
Amber
  • 507,862
  • 82
  • 626
  • 550
  • 1
    This is the best explanation. Every other answer explaining it in terms of "points" has gotten it horribly wrong. – BoltClock Aug 11 '12 at 22:58
  • Wow, I've been schooled. Amber and BoltClock are right: http://www.w3.org/TR/css3-selectors/#specificity. Also, just tested it here: http://jsfiddle.net/fPxcS/. I'm deleting my answer (despite the +1). – Faust Aug 11 '12 at 23:23
  • Trying to figure out where so many of us got so mis-guided. Here's one possible culprit: http://www.htmldog.com/guides/cssadvanced/specificity/ -- I've been relying on HTML-Dog for years, so that's probably where I got it. – Faust Aug 11 '12 at 23:29
  • Note: http://stackoverflow.com/questions/2809024/points-in-css-specificity. The question title explicitly references the point system, but no one seems to have been aware of its ivalidity. Hmmm, that post was back March 2010, but my w3c ref is dated Nov 2011. So can we assume this a reivsed algorithm? – Faust Aug 11 '12 at 23:36
  • @Faust: It [was the same way in CSS2](http://www.w3.org/TR/CSS21/cascade.html#specificity)... – animuson Aug 11 '12 at 23:37
  • CSS specificity has always worked in the above manner; there are just a lot of guides that explain it incorrectly and/or imprecisely. – Amber Aug 11 '12 at 23:40
  • @Faust, animuson: This may explain it better: [Why can't I beat an ID with multiple classes?](http://stackoverflow.com/questions/9540339/why-cant-i-beat-an-id-with-multiple-classes) – BoltClock Aug 12 '12 at 08:43
  • For giggles, I tested the boundaries. It appears the "large base" referred to in the spec is being interpreted, across browsers, as 256 (naturally). See: http://jsfiddle.net/RKEJE/ and http://jsfiddle.net/RKEJE/1/ – Faust Aug 12 '12 at 10:00
0

Because of specificity: the first rule has a specificity of 101, while #my_item only has a specificity of 100. Use the !important keyword or (as you've done) increase the specificity of the selector you want to use. If two rules have the same specificity, the "latest" one wins.

You
  • 22,800
  • 3
  • 51
  • 64
0

Scince you asked "Why can't I just use #my_item for that last selector?" and you've got answers from experts (about specificity) but you can alternatively do it as follows

#my_item {
    margin-bottom:30px !important;
}​

DEMO.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
The Alpha
  • 143,660
  • 29
  • 287
  • 307