title: CSS :not for selector on the same level
body: <p>I have this html, sometimes <code>stars--done</code> is not there but I want to alter the CSS.</p>
  
  <pre><code>&lt;div class="stars stars--done"&gt;
    &lt;i&gt;&lt;/i&gt;
    &lt;i&gt;&lt;/i&gt;
    &lt;i&gt;&lt;/i&gt;
    &lt;i&gt;&lt;/i&gt;
    &lt;i&gt;&lt;/i&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Currently I have this</p>
  
  <pre><code>.stars {
    &amp;:hover {
      i {
        //do somehting
      }
    }
  }
  </code></pre>
  
  <p>I only want to make the <code>&lt;i&gt;</code> do something if the parent <em>does not</em> match <code>.stars--done</code></p>
  
  <pre><code>.stars {
    &amp;:not('.stars--done'):hover {
      i {
        //do somehting
      }
    }
  }
  </code></pre>