Question

I have a bunch of divs which I nest arbitrarily:

<div>
  <div>
    <div>Apple</div>
    <div>
      <div>Banana</div>
      <div>Grape</div>
    </div>
  </div>
  <div>Craisin</div>
</div>

I make their contents pink with a rule like this:

div { color: pink; }

I want to be able to add the special class to any of those divs to cancel out the pink rule for it and all of its children. For example, if I add the special class to this div,

<div>
  <div class="special">
    <div>Apple</div>
    <div>
      <div>Banana</div>
      <div>Grape</div>
    </div>
  </div>
  <div>Craisin</div>
</div>

then “Apple,” “Banana,” and “Grape” should no longer be pink.

Can I tweak my rule to only match divs that aren’t nested inside a .special?

I’m not looking for a solution involves writing a rule for .special that cancels out every style defined on div. For example, this is not a good solution even though it works:

.special, .special div { color: black !important; }

My actual styles are more complicated than just changing the color, and there are other rules with selectors like div span which I would also like to disable with the special class.

Answer 1

You cannot prevent children/descendants from inheriting inheritable style properties using CSS.

The style properties for the descendants have to explictly be reset.