0

I was reading about unset property at MDN and then got stuck in their code example(the code below) without understanding how come an element selector is overriding a class selector with an !important declaration while being earlier in the cascade.

ps: English isn't my main language, let me know if it sounded confusing.

p {
  color: red;
}

.foo {
  color: blue !important; 
}

.bar {
  color: green;
}

.bar p {
  color: unset;
}
<p>This text is red.</p>
<div class="foo">
  <p>This text is also red.</p>
</div>
<div class="bar">
  <p>This text is green (default inherited value).</p>
</div>
alramos
  • 1
  • there is no selector target a div element so where you see the override? – Temani Afif Jun 17 '20 at 01:01
  • I'm expecting the following: the second paragraph being blue because the specificity value of class selector is bigger than an element selector, even more having an !important declaration and being later in the cascade. – alramos Jun 17 '20 at 02:16

0 Answers0