title: Can I apply CSS only if an ancestor does not contain a certain class?
body: <p><strong>Explanation:</strong></p>
  
  <p>I'm not a CSS expert but my current attempt is this.</p>
  
  <pre><code>div:not(.classToBeAvoid) *{
      background-color:red;
  }
  </code></pre>
  
  <p>Which in English I read as...</p>
  
  <p>"Apply a red background to any element which does not have <code>&lt;div class="classToBeAvoid"&gt;</code> as an ancestor".</p>
  
  <p>But nonetheless, in my test, it doesn't seem to work like this.</p>
  
  <p><strong>CodePen:</strong></p>
  
  <p><a href="https://codepen.io/anon/pen/eGVBVb" rel="noreferrer">https://codepen.io/anon/pen/eGVBVb</a></p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>&lt;div class="classToBeAvoid"&gt;
    &lt;div&gt;
      &lt;p&gt;
        Shouldn't be a red background on any element around here.
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
   &lt;p&gt;
     Should be a red background
   &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>div:not(.classToBeAvoid) *{
    background-color:red;
  }
  </code></pre>