title: CSS specificity of :not() pseudo class
body: <p>I have this small HTML:</p>
  
  <pre><code>&lt;div id="column"&gt;
      &lt;div class="ticker"&gt;
          &lt;ul&gt;
              &lt;li&gt;Item 1&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>For <code>ul</code> elements outside of the <code>.ticker</code> class, but inside of the <code>#column</code> id exists this CSS:</p>
  
  <pre><code>#column ul:not(.a):not(.b) {
      margin: 1em;
  }
  </code></pre>
  
  <p>But inside the <code>.ticker</code> class I don't want this margin. So I thought I could use:</p>
  
  <pre><code>#column .ticker ul {
      margin: 0;
  }
  </code></pre>
  
  <p>That said, I know that the specificity of the first CSS selector is higher because of the two <code>:not()</code> pseudo classes. But to get a higher specificity I had to append those two <code>:not()</code> in the second CSS snippet to the <code>ul</code>, too. So that works:</p>
  
  <pre><code>#column .ticker ul:not(.c):not(.d) {
      margin: 0;
  }
  </code></pre>
  
  <p>Isn't that stupid? In fact it doesn't matter what you use in the two <code>:not()</code>pseudo classes. They just have to be there. This doesn't make any sense to me. </p>
  
  <p>Is that simply a part of CSS3 which is not perfect or is there a solution which my brain didn't come up with yet?</p>
  
  <p>See it in action here: <a href="http://jsfiddle.net/9BDw5/2/" rel="noreferrer">http://jsfiddle.net/9BDw5/2/</a></p>