title: SASS/CSS: :first-child selector not working
body: <p>I'm trying to style a certain <code>&lt;div&gt;</code> in my markup with CSS/SASS, and I'm clueless as to why it's not applying the rules. This is my markup:</p>
  
  <pre><code>&lt;div class="row addon-header"&gt;
      &lt;div class="col-sm-3"&gt;
      // something here
      &lt;/div&gt;
      &lt;div class="col-sm-9"&gt;
          &lt;h2&gt;Title&lt;/h2&gt;
          &lt;h6&gt;&lt;em&gt;Slogan&lt;/em&gt;&lt;/h6&gt;
          &lt;div class="col-xs-1"&gt;
              // I want to access this
          &lt;/div&gt;
          &lt;div class="col-xs-1"&gt;&lt;/div&gt;
          &lt;div class="col-xs-1"&gt;&lt;/div&gt;
          &lt;div class="col-xs-1"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the SASS I'm trying to use for it:</p>
  
  <pre><code>div.addon-header {
      color: white;
      &gt; div.col-sm-9 &gt; div.col-xs-1:first-child {
          background-color: black;
          padding-left: 0px !important;
      }
  }
  </code></pre>
  
  <p>If I remove the <code>:first-child</code> selector in my SASS, it's working, but obvious for every <code>&lt;div class="col-xs-1"&gt;</code> not just the first one, which is not what I want.</p>
  
  <p>I also tried playing around and doing something like</p>
  
  <pre><code>div.addon-header {
      color: white;
      &gt; div.col-sm-9 &gt; div.col-xs-1 {
          &amp;:first-child {
              background-color: black;
              padding-left: 0px !important;
          }
      }
  }
  </code></pre>
  
  <p>or</p>
  
  <pre><code>div.addon-header {
      color: white;
      &gt; div.col-sm-9 {
          &gt; div.col-xs-1:first-child {
              background-color: black;
              padding-left: 0px !important;
          }
      }
  }
  </code></pre>
  
  <p>or using <code>:nth-child(1)</code> instead. Nothing works. I'm clueless. Somewhere else in my SASS, I have the following:</p>
  
  <pre><code>.tab-content {
      &gt;.tab-pane:first-child &gt; form &gt; div.row &gt; div {
          // rules here
          &gt; div.picture-container {
              // rules here
          }
      }
      &gt;.tab-pane {
          // rules here
      }
      &gt;.tab-pane:nth-child(4) &gt; form {
          // rules here
      }
  }
  </code></pre>
  
  <p>Which is working just fine. So I really don't get what I'm doing wrong in the first example. Anyone able to help?</p>