CODEWITHSUNDEEP
csscss-specificity
NinGen ShinRa
NinGen ShinRa

Reputation: 651

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?

Upvotes: 3

Views: 57

Answers (2)

Christian
Christian

Reputation: 19740

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

Upvotes: 2

SeanCannon
SeanCannon

Reputation: 77956

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.

Upvotes: 3

Related Questions