title: CSS rule is executed with and without :not() selector
body: <p>I'm having a really strange problem with my Sass/CSS. I have a rule that is executed with and without the :not() selector, but I don't think it should be applied with :not().</p>
  
  <p>This runs:</p>
  
  <pre><code>.background-color-white {
      .breadcrumbs-primer {
          position: relative;
          z-index: 1;
          li, a, li:after, li a:after {
              color: $color-white;
          }
      }
  } 
  </code></pre>
  
  <p>But so does this:</p>
  
  <pre><code>:not(.background-color-white) {
      .breadcrumbs-primer {
          position: relative;
          z-index: 1;
          li, a, li:after, li a:after {
              color: $color-white;
          }
      }
  } 
  </code></pre>
  
  <p>and <code>.breadcrumbs-primer</code> is nested inside <code>.background-color-white</code> in my HTML as you can see here: </p>
  
  <pre><code>&lt;div class="background-color-white"&gt;
     &lt;!-- breadcrumbs --&gt;
     &lt;div class="breadcrumbs-primer padding-top-small"&gt;
        &lt;div class="row"&gt;
           &lt;div class="small-12 columns"&gt;
              &lt;ul class="breadcrumbs"&gt;
                 &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                 &lt;li class="disabled"&gt;Lorem ipsum dolar&lt;/li&gt;
              &lt;/ul&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;!-- end breadcrumbs --&gt;
  &lt;/div&gt;  
  </code></pre>