Unusual CSS specificity behaviour

Question

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?

Answer 1

The first rule is narrowed to the span tag. The second rule is a higher level, at the parent section. So, yes, .class span will take precedence because it's hitting the actual tag.

Answer 2

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