title: Use :not selector to exclude a div and all its descendants
body: <p>I have a situation where a style of purple font color with a light yellow background needs to be applied to all divs outside a div having a class of <code>RadDiv</code>.</p>
  
  <p>This means all divs that are nested within the div with class of <code>RadDiv</code> should be excluded. </p>
  
  <p>I tried using <code>:not</code> selector as shown below but it does not work. <a href="http://js.do/sun21170/77657" rel="nofollow">Demo of my situation</a></p>
  
  <p><strong>Question</strong>: How would I specify the <code>:not</code> selector to exclude a div with a class of <code>RadDiv</code> and all nested divs inside this div?</p>
  
  <p><strong>:not selector that does not work</strong></p>
  
  <pre><code>div:not(.RadDiv) div   {
    background-color:lightyellow;
    color:purple;
    }
  </code></pre>
  
  <p><strong>Complete code that I tried</strong></p>
  
  <pre><code>&lt;div&gt;This is a div &lt;/div&gt;
  &lt;div class="RadDiv newDiv outerDiv"&gt;
      &lt;div class="header"&gt;
        This is the header
      &lt;/div&gt;
  
       This is an outer div
  
       &lt;div class="alert highlight"&gt;
        This div stands out
      &lt;/div&gt;
      &lt;div class="footer disclaimer"&gt;
       This is the footer part
      &lt;/div&gt;
      &lt;table&gt;
        &lt;tr&gt;
         &lt;td&gt;
           &lt;div&gt;This is div inside a table element&lt;/div&gt;
         &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;div id="div1"&gt;This is div1&lt;/div&gt;
  &lt;div id="div2"&gt;This is div2&lt;/div&gt;
  &lt;style&gt;
  div:not(.RadDiv) div   {
    background-color:lightyellow;
    color:purple;
    }
    .outerDiv {
        border:1px solid red;
        font-family:Arial;
    }
    .footer {
      color:lightgray;
      font-size:small;
      font-style:italic;
      }
      .header {
      font-weight:bold;
      }
  </code></pre>