Question

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?

Answer 1

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.