title: css :not(), selectors and selecting descendants
body: <p>Let's say I have :</p>
  <pre><code>&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
      &lt;head&gt;
          &lt;title&gt;Test for :not&lt;/title&gt;
          &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;Test.css&quot; /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class=&quot;a&quot;&gt;
              &lt;p class=&quot;para&quot;&gt;This line should be green.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;a&quot;&gt;
              &lt;p class=&quot;para&quot;&gt;This line should also be green.&lt;/p&gt;
              &lt;div class=&quot;ds&quot;&gt;
                  &lt;p class=&quot;para&quot;&gt;This is another line that should be yellow&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I want to select all the elements with <code>class=&quot;para&quot;</code> but exclude those that are descendants of those elements that have a <code>class=&quot;ds&quot;</code>. I have this CSS:</p>
  <pre><code>.ds { color: grey; border-style:solid; border-width:5px;}
                  
  .para {color:yellow;}
                  
  .para:not(.ds .para) {color:green; border-style:solid; border-width:5px;} //not working
  </code></pre>
  <p>So I assume I can only have simple selectors as part of <code>:not(S)</code>, I can't have <code>:not (X Y)</code>. I am running in both Chrome (18.0.1025.162 m) and Firefox (10). Any ideas?</p>
  <p><strong>Please note</strong>: That the query is part of a bigger issue, I have some code (in gwt) that is selecting a list of elements (e.g. with <code>class=&quot;para&quot;</code>) from the DOM. However, I have found a bug that requires the exclusion of elements that are descendants of a particular set of elements (e.g those with a <code>class=&quot;ds&quot;</code>).</p>