Ignore CSS rules if in specific element

Question

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>

I am not sure if it's the best practice but ---- .root .special { css here overwrite !important } — Met Br, Feb 28 '22 at 09:17
You may be looking for `all: initial` as shown in [this answer](https://stackoverflow.com/a/53955184/7657915) so you don't need to make counter-rules for every single rule the parent has. — JHeth, Feb 28 '22 at 09:33

jeremy-denis · Answer 1 · 2022-02-28T09:49:17.400

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>

Ignore CSS rules if in specific element

1 Answers1