Element selector CSS overriding class css

Question

Can anybody explain why my reset CSS is overriding my more specified class CSS?

<div class="plan-price heading--xl">
  <span data-annual="127" data-montly="159">
    <sup>$</sup>
    <span>127</span>
    <span class="plan-month_marker heading--body_title"> /mo</span>
  </span>
</div>

Can you provide your HTML ? class are more specified than tag indeed it's werid. Dev tools says that .headin--xl is inherited from div.plan-price and it's more specified — Rémy Testa, Oct 21 '19 at 09:27
you never set any styles for your span, so the reset styles are used. — cloned, Oct 21 '19 at 09:29
Possible duplicate of [What is the order of precedence for CSS?](https://stackoverflow.com/questions/25105736/what-is-the-order-of-precedence-for-css) — James Burgess, Oct 21 '19 at 09:33
@cloned If you look at .heading--xl, the font-size is getting overridden by the global span — jnstn, Oct 21 '19 at 09:38
@AlessioCantarella Good spot. Schoolboy mistake on my part! Thanks! — jnstn, Oct 21 '19 at 09:42

score 2 · Accepted Answer · answered Oct 21 '19 at 09:42

That's how CSS works. You don't specify a value for the span, just for the outside div. The span inside is more specific as any outside selector so it will take whatever is defined for the span element.

You have to update the styling for your span element if you want it to have a different styling than the default one.

span {
  font-size: 20px;
}

.heading--xl {
  font-size: 12px;
}

<div class="plan-price heading--xl">
  <span data-annual="127" data-montly="159">
    <sup>$</sup>
    <span>127</span>
  <span class="plan-month_marker heading--body_title"> /mo</span>
  </span>
</div>

Element selector CSS overriding class css

1 Answers1