title: Why is my jQuery :not() selector not working in CSS?
body: <p>I have this layout:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="sectors"&gt;
      &lt;h1&gt;Sectors&lt;/h1&gt;
      &lt;div id="s7-1103" class="alpha"&gt;&lt;/div&gt;
      &lt;div id="s8-1104" class="alpha"&gt;&lt;/div&gt;
      &lt;div id="s1-7605" class="beta"&gt;&lt;/div&gt;
      &lt;div id="s0-7479"&gt;&lt;/div&gt;
      &lt;div id="s2-6528" class="gamma"&gt;&lt;/div&gt;
      &lt;div id="s0-4444"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With these CSS rules:</p>
  
  <pre class="lang-css prettyprint-override"><code>#sectors {
      width: 584px;
      background-color: #ffd;
      margin: 1.5em;
      border: 4px dashed #000;
      padding: 16px;
      overflow: auto;
  }
  
  #sectors &gt; h1 {
      font-size: 2em;
      font-weight: bold;
      text-align: center;
  }
  
  #sectors &gt; div {
      float: left;
      position: relative;
      width: 180px;
      height: 240px;
      margin: 16px 0 0 16px;
      border-style: solid;
      border-width: 2px;
  }
  
  #sectors &gt; div::after {
      display: block;
      position: absolute;
      width: 100%;
      bottom: 0;
      font-weight: bold;
      text-align: center;
      text-transform: capitalize;
      background-color: rgba(255, 255, 255, 0.8);
      border-top: 2px solid;
      content: attr(id) ' - ' attr(class);
  }
  
  #sectors &gt; div:nth-of-type(3n+1) {
      margin-left: 0;
  }
  
  #sectors &gt; div.alpha { color: #b00; background-color: #ffe0d9; }
  #sectors &gt; div.beta  { color: #05b; background-color: #c0edff; }
  #sectors &gt; div.gamma { color: #362; background-color: #d4f6c3; }
  </code></pre>
  
  <p>I use jQuery to add the <code>unassigned</code> class to sectors that don't otherwise have one of the classes <code>alpha</code>, <code>beta</code> or <code>gamma</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>$('#sectors &gt; div:not(.alpha, .beta, .gamma)').addClass('unassigned');
  </code></pre>
  
  <p>Then I apply some different rules to that class:</p>
  
  <pre class="lang-css prettyprint-override"><code>#sectors &gt; div.unassigned {
      color: #808080;
      background-color: #e9e9e9;
      opacity: 0.5;
  }
  
  #sectors &gt; div.unassigned::after {
      content: attr(id) ' - Unassigned';
  }
  
  #sectors &gt; div.unassigned:hover {
      opacity: 1.0;
  }
  </code></pre>
  
  <p>And everything works flawlessly in modern browsers.</p>
  
  <p><a href="http://jsfiddle.net/BoltClock/vJazE" rel="noreferrer">Interactive jsFiddle preview</a></p>
  
  <p>But seeing as the <a href="http://api.jquery.com/not-selector" rel="noreferrer"><code>:not()</code> selector in jQuery</a> is based on <a href="http://www.w3.org/TR/css3-selectors/#negation" rel="noreferrer"><code>:not()</code> in CSS3</a>, I was thinking I could move it directly into my stylesheet so I wouldn't have to rely on adding an extra class using jQuery. Besides, I'm not really interested in supporting older versions of IE, and other browsers have excellent support for the <code>:not()</code> selector.</p>
  
  <p>So I try changing the <code>.unassigned</code> portion above to this (knowing I will only have sectors Α, Β and Γ in my layout):</p>
  
  <pre class="lang-css prettyprint-override"><code>#sectors &gt; div:not(.alpha, .beta, .gamma) {
      color: #808080;
      background-color: #e9e9e9;
      opacity: 0.5;
  }
  
  #sectors &gt; div:not(.alpha, .beta, .gamma)::after {
      content: attr(id) ' - Unassigned';
  }
  
  #sectors &gt; div:not(.alpha, .beta, .gamma):hover {
      opacity: 1.0;
  }
  </code></pre>
  
  <p>But as soon as I do this it stops working — in <em>all browsers</em>! My unassigned sectors aren't grayed out, faded out or labeled 'Unassigned' anymore.</p>
  
  <p><a href="http://jsfiddle.net/BoltClock/vJazE/1" rel="noreferrer">Updated but not so interactive jsFiddle preview</a></p>
  
  <p>Why does the <code>:not()</code> selector work in jQuery but fail in CSS? Shouldn't it work identically in both places since jQuery claims to be "CSS3 Compliant", or is there something I'm missing?</p>
  
  <p>Is there a pure CSS workaround for this or will I have to rely on a script?</p>