title: CSS selector :first-child appears to be ignored when applying styling to elements inside that selector
body: <p>I'm using SASS's <code>&amp;</code>-nesting to apply a background to <code>:first-child</code> elements, but would also like to apply unique styling to certain other elements <strong>within</strong> those <code>:first-child</code> elements.</p>
  
  <p>Here is the SASS:</p>
  
  <pre class="lang-css prettyprint-override"><code>// Part Tree
  .part-tree-item{
      ... 
  
      &amp;:first-child{
          background: red;
  
          .part-tree-item-header{
              top: -5px;
              margin-top: 0;
          }
      }
  }
  </code></pre>
  
  <p>The CSS <code>:first-child</code> selector appears to work just fine, applying a red background to first children (and only first children):</p>
  
  <p><a href="https://i.stack.imgur.com/yLiGe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yLiGe.png" alt="enter image description here"></a></p>
  
  <p>However, as you can see from the SASS, I have some special styling I'd like to apply to only <code>.part-tree-item-header</code> elements within a <code>.part-tree-item:first-child</code> </p>
  
  <p>Here, I'm showing the styling of the <code>.part-tree-item-header</code> within a <code>.part-tree-item</code> element that is <strong>not</strong> <code>:first-child</code> (note the lack of a red background, indicating as such).</p>
  
  <p>However, this <code>.part-tree-item-header</code> still has the special case SASS (adjusting it's <code>top</code> and <code>margin-top</code> styling)</p>
  
  <p><a href="https://i.stack.imgur.com/dI9uj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dI9uj.png" alt="enter image description here"></a></p>
  
  <p>Here is the HTML, for proof that the <code>.part-tree-item</code> parent in question is not, in fact, a <code>:first-child</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/2uAku.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2uAku.png" alt="enter image description here"></a></p>
  
  <p>Am I just using the <code>:first-child</code> selector incorrectly? Does it not chain like I think it does? Can I only use it as the final part of a selector?</p>
  
  <p>Any help would be vastly appreciated!!!</p>