Search code examples
csscss-specificity

Unusual CSS specificity behaviour

I've worked with CSS for ages and I thought I understood specificity well, but this example baffles me; it's late at night so I might be missing something obvious:

.class span {
  color: blue;
}

section#id {
  color: beige;
}
<div class="class">
  <section id="id">
    <span>Test</span>
  </section>
</div>

Specificity for section#id is 101, while for .class span is 11 and, on top of that, the second rule is even specified after the first one.

What obvious thing am I missing?

Solution

  • You aren't targeting the span with the second selector. The color will only cascade to elements where the color property is set to inherit (default).