0

I’m a bit confused as to why the snippet below doesn’t have red text.

I always thought !important would take precedence over any other selector, no matter its specificity. Isn’t that the case?

.one {
  color: blue;
}

.red {
  color: red !important;
}
<div class="red">
  <div class="one">One</div>
  <div class="two">Two</div>
</div>

Just to be clear, my expectation here is to see only red text, no blue.

Simone
  • 20,302
  • 14
  • 79
  • 103
  • 4
    Per [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity): `When two conflicting declarations with the !important rule are applied to the same element, the declaration with a greater specificity will be applied.` – j08691 Aug 29 '19 at 13:04
  • `.red` is the most important color value for `.bar` so any descendants that don't have a color applied will inherit red and not blue. `.one` does not inherit color from any parents because it has its own color so whatever color is applied to `.bar` is ignored. Doesn't matter if it was important or not. – Reactgular Aug 29 '19 at 13:06
  • @Reactgular that makes sense - could you provide me a link to the spec where it says that? If you post it as an answer I’ll accept it – Simone Aug 29 '19 at 13:10
  • @j08691 even though what you say is correct in this case `!important` is only applied once to the parent element – caramba Aug 29 '19 at 13:13
  • there is specificity and *inheritance* .. two different concepts – Temani Afif Aug 29 '19 at 13:24
  • from the duplicate : *3) Specified properties override inherited properties* – Temani Afif Aug 29 '19 at 13:25

0 Answers0