SASS/CSS:: First-Kind-Selektor funktioniert nicht

Question

Ich versuche, eine bestimmte <div> in meinem Markup mit CSS/SASS zu stylen, und ich bin ahnungslos, warum es nicht die Regeln anwendet. Das ist mein Markup:

<div class="row addon-header"> 
    <div class="col-sm-3"> 
    // something here 
    </div> 
    <div class="col-sm-9"> 
     <h2>Title</h2> 
     <h6><em>Slogan</em></h6> 
     <div class="col-xs-1"> 
      // I want to access this 
     </div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
    </div> 
</div> 

Und das ist die SASS Ich versuche, es zu verwenden:

div.addon-header { 
    color: white; 
    > div.col-sm-9 > div.col-xs-1:first-child { 
     background-color: black; 
     padding-left: 0px !important; 
    } 
} 

Wenn ich die :first-child Wähler in meinem SASS entfernen, es funktioniert, aber offensichtlich für jeden <div class="col-xs-1"> nicht nur der erste, was ich nicht will.

Ich habe auch versucht herum spielen und etwas zu tun, wie

div.addon-header { 
    color: white; 
    > div.col-sm-9 > div.col-xs-1 { 
     &:first-child { 
      background-color: black; 
      padding-left: 0px !important; 
     } 
    } 
} 

oder

div.addon-header { 
    color: white; 
    > div.col-sm-9 { 
     > div.col-xs-1:first-child { 
      background-color: black; 
      padding-left: 0px !important; 
     } 
    } 
} 

oder mit :nth-child(1) statt. Nichts funktioniert. Ich habe keine Ahnung. An anderer Stelle in meinem SASS habe ich folgendes:

.tab-content { 
    >.tab-pane:first-child > form > div.row > div { 
     // rules here 
     > div.picture-container { 
      // rules here 
     } 
    } 
    >.tab-pane { 
     // rules here 
    } 
    >.tab-pane:nth-child(4) > form { 
     // rules here 
    } 
} 

Das funktioniert gut. So verstehe ich im ersten Beispiel wirklich nicht, was ich falsch mache. Wer kann helfen?

Answer 1

col-xs-1 müssen row wickeln, weil dieser Block nicht das erste Element ist. Erstes Element ist h2

Answer 2

Sie benötigen die :nth-of-type() (oder in Ihrem Fall die :first-of-type Selektor).

In dem Beispiel Ihr :first-child von .col-sm-9 Element ist die h2.

div.addon-header { 
    color: white; 
    > div.col-sm-9 > div.col-xs-1:first-of-type { 
     background-color: black; 
     padding-left: 0px !important; 
    } 
} 

Beachten Sie jedoch, dass die :nth-of-type() Selektoren, wie die :nth-child() Selektoren, nur um Tags gelten, nicht Klassennamen; Wenn Sie einen anderen div vor dem ersten .col-xs-1 einfügen würden, würde dies nicht mehr funktionieren.