理解CSSの子セレクタ

Question

私はnth-child以下のHTML構造のnth-of-typeを使用することはできませんよ。

<div class="wrapper"> 
    <div class="child_1">Child 1</div> 
    <div> Not child 1 </div> 
    <div class="child_1">Child 1</div> 
    <div class="child_1">Child 1</div> 
</div> 

私は何をしたい第二child_1を選択しているが、私はどのように見つけることができません。 誰か私に答えがありますか？

Answer 1

クラスにnth-of-typeを選択することはできません。代わりにdivをターゲットにする必要があります。 MDNから

：

nth-of-type

nth-child

.wrapper div:nth-child(3) { 
 
    color: red; 
 
}

<div class="wrapper"> 
 
    <div class="child_1">Child 1</div> 
 
    <div> Not child 1 </div> 
 
    <div class="child_1">Child 1</div> 
 
    <div class="child_1">Child 1</div> 
 
</div>

Answer 2

これはあなたの仕事を行います。

.wrapper .child_1:nth-child(3){ 
 
    background:red; 
 
}

<div class="wrapper"> 
 
     <div class="child_1">Child 1</div> 
 
     <div> Not child 1 </div> 
 
     <div class="child_1">Child 1</div> 
 
     <div class="child_1">Child 1</div> 
 
    </div>

しかしchild選択をスタンドの下にあなたがしたい場合。 選択肢にはいくつかの種類があります。このサンプルでnth-child、nth-of-type、first-childとlast-child

ようにあなたはnth-of-typeを使用するカントが、残りの部分を使用することができます。これが長い子グループで、下を選択できない場合は使用できます。

.wrapper .child_1:last-child{ 
    background:red; 
} 

、選択したい場合はsecond last childあなたが使用することができます。これはまた行く

.wrapper .child_1:last-child(2){ 
    background:red; 
} 

をtopからfirst-child子供セレクタを使用。 ty