'Ignore CSS rules if in specific element

Let's say I have a class called .root which contains a lot of CSS rules which applies to almost all of my website.

I also have some "special" elements (included in the .root one), but I don't want to apply the .root rules to whatever is included in .special elements. I don't want to "override" all root rules, just not apply them.

Is it possible using only CSS?

Thank you!

.root {
  color: blue;
  
  /* Lots of other styles */
}

.special {
  font-weight: bold;
}
<div class="root">
  This is blue
  
  <div class="special">
    <span>This is bold and blue, but I'd like this to be only bold</span>
  </div>
</div>
csscss-selectors


Solution 1:[1]

you can use value property:initial to one property to the have the initial value of this property

or you can use all: initialto set all value of a selector to their inital value

https://developer.mozilla.org/fr/docs/Web/CSS/initial

.root {
  color: blue;
  
  /* Lots of other styles */
}

.special {
  font-weight: bold;
  color: initial;
}
<div class="root">
  This is blue
  
  <div class="special">
    <span>This is bold and blue, but I'd like this to be only bold</span>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions