SASS/CSS :: first-childセレクタが動作しない

Question

私はCSS/SASSで自分のマークアップで特定の<div>のスタイルを設定しようとしています。なぜそれがルールを適用しないのかわかりません。それはすべてのために働いて、しかし明らかだ、私は私のSASSで:first-childセレクタを削除した場合

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

：これは私のマークアップです：

<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> 

そして、これは私がそれを使用しようとしているSASSです<div class="col-xs-1">最初のものだけでなく、私が望むものでもありません。

私も遊んと

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

または

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

またはその代わりに:nth-child(1)を使用してのようなものをやってみました。何も動作しません。私は無知だ。私のSASSの他の場所では、次のようなことがあります。

.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 
    } 
} 

うまくいきます。だから私は最初の例で私が間違っていることを実際には得られない。誰でも手伝うことができますか？

Answer 1

col-xs-1このブロックは最初の要素ではないため、rowをラップする必要があります。最初の要素はh2

Answer 2

:nth-of-type()（または、お客様の場合は:first-of-typeセレクタ）が必要です。

この例では、:first-childの.col-sm-9要素はh2です。

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

注意、しかし、:nth-child()セレクタのような:nth-of-type()セレクタは、タグに適用されることだけではなく、クラス名。最初に.col-xs-1の前に別のdivを挿入すると、これはもう機能しません。