title: Using :not Selector To Remove Margins
body: <p>I'm trying to use the <code>:not</code> selector to get rid of margins from an element that isn't followed by a certain element (<code>.red</code>).</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;section class="image"&gt;&lt;/section&gt;
  &lt;div class="red"&gt;&lt;/div&gt;
  &lt;section class="image"&gt;&lt;/section&gt;
  &lt;section class="image"&gt;&lt;/section&gt;
  &lt;section class="image"&gt;&lt;/section&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.image {
    background: green;
    height: 100px;
    width: 100px;
    margin-bottom: 30px;
  }
  
  .image + div:not(.red) {
    margin-bottom: 0;
  }
  </code></pre>
  
  <p>For some reason though, the bottom margins aren't being removed. I've setup a CodePen of it in action <a href="http://codepen.io/realph/pen/XJBwmR" rel="nofollow">over here</a>.</p>
  
  <p>Any help is appreciated. Thanks in advance!</p>