title: css3 :not() selector to test parent's class
body: <p>I have an unordered list, using bootstraps "tabs" plugin. The code looks like this:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li class="active span3"&gt;&lt;a href="#ourAgency" data-toggle="tab"&gt;&lt;i class="icon-building icon-3x"&gt;&lt;/i&gt;Our Agency&lt;/a&gt;&lt;/li&gt;
    &lt;li class="span3"&gt;&lt;a href="#studentVisas" data-toggle="tab"&gt;&lt;i class="icon-laptop icon-3x"&gt;&lt;/i&gt;Student Visas&lt;/a&gt;&lt;/li&gt;
    &lt;li class="span3"&gt;&lt;a href="#workVisas" data-toggle="tab"&gt;&lt;i class="icon-suitcase icon-3x"&gt;&lt;/i&gt;Work Visas&lt;/a&gt;&lt;/li&gt;
    &lt;li class="span3"&gt;&lt;a href="#accreditation" data-toggle="tab"&gt;&lt;i class="icon-legal icon-3x"&gt;&lt;/i&gt;Accreditation&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I'd like to use CSS3 to change the colour of all the <code>&lt;a&gt;</code> links whose parent <code>&lt;li&gt;</code> DOESN'T have the class <code>.active</code>. </p>
  
  <p>I've tried something like this:</p>
  
  <pre><code> a:not(li.active&gt;a){
      color:grey;
  }
  </code></pre>
  
  <p>but to no avail. Is there any way to do this or am I barking up the wrong tree?</p>