nth-of-typeを定義する

Question

私は3つの同じdivを持っていますが、CSSで2番目のスパンを変更したいのですが、入力するものは何か：nth-of-type(2)クラス、first-of-typeスパン、最初の2つのスパンは変化しています。私はちょうど最初のものが必要です。

この私のコード

.info:nth-of-type(2) span:first-of-type { 
 
    color: #f4fffe; 
 
}

<div class="info"> 
 
    <span>Plan</span> 
 
    <div class="price"> 
 
    <span>95<sup>99</sup></span> 
 
    <span>dollars</span> 
 
    </div> 
 
</div>

Answer 1

あなたがあなたの元のコードは正常に動作します

.info:nth-of-type(2) .price span:first-of-type { 
 
    color: red; 
 
}

<div class="info"> 
 
    <span>Plan</span> 
 
    <div class="price"> 
 
    <span>95<sup>99</sup></span> 
 
    <span>dollars</span> 
 
    </div> 
 
</div> 
 
<div class="info"> 
 
    <span>Plan</span> 
 
    <div class="price"> 
 
    <span>95<sup>99</sup></span> 
 
    <span>dollars</span> 
 
    </div> 
 
</div> 
 
<div class="info"> 
 
    <span>Plan</span> 
 
    <div class="price"> 
 
    <span>95<sup>99</sup></span> 
 
    <span>dollars</span> 
 
    </div> 
 
</div>

Answer 2

あなたは今までに二を追加する場合は、直接の子セレクタ>が必要であるとの直接の子セレクタ>

注意を使用して、次のように行いますされます要素として、私がサンプルとして行ったもの、またはその要素の第1スパンも同様に選択されます。

元の質問今

.month24 { 
 
    padding-left: 10px; 
 
} 
 

 
.info:nth-of-type(2) .price > span:first-child { 
 
    color: #f40; 
 
}

<div class="info"> 
 
    <span>Plan</span> 
 
    <div class="price"> 
 
    <span>95<sup>99</sup></span> 
 
    <span>dollars</span> 
 
    </div> 
 
</div> 
 
<div class="info"> 
 
    <span>Plan</span> 
 
    <div class="price"> 
 
    <span>95<sup>99</sup></span> 
 
    <span>dollars</span> 
 
    <div class="month24"> 
 
     <span>85<sup>99</sup></span> 
 
     <span>dollars</span> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="info"> 
 
    <span>Plan</span> 
 
    <div class="price"> 
 
    <span>95<sup>99</sup></span> 
 
    <span>dollars</span> 
 
    </div> 
 
</div>

の編集に基づいて、サンプル・コード更新、それはinfoの最初のスパンだ場合、あなたはこの

.month24 { 
 
    padding-left: 10px; 
 
} 
 

 
.info:nth-of-type(2) > span:first-child { 
 
    color: #f40; 
 
}

<div class="info"> 
 
    <span>Plan</span> 
 
    <div class="price"> 
 
    <span>95<sup>99</sup></span> 
 
    <span>dollars</span> 
 
    </div> 
 
</div> 
 
<div class="info"> 
 
    <span>Plan</span> 
 
    <div class="price"> 
 
    <span>95<sup>99</sup></span> 
 
    <span>dollars</span> 
 
    <div class="month24"> 
 
     <span>85<sup>99</sup></span> 
 
     <span>dollars</span> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="info"> 
 
    <span>Plan</span> 
 
    <div class="price"> 
 
    <span>95<sup>99</sup></span> 
 
    <span>dollars</span> 
 
    </div> 
 
</div>

好きです

Answer 3

.price:nth-of-type(2) span:first-of-type { 
color: #f4fffe; } 

あなたはこの手動を実行する必要があります。

残念ながら、は、n番目の-の型クラスのを選択する方法（私の知っている、少なくともなし）はありません。

Answer 4

代わりに.priceのあなたの.info上のn番目の-の型を配置する必要があります。 >セレクタを使用できますが、:first-of-typeも同様に動作します。あなたは3つの.infodiv要素でそれを実行し、見つけやすい色を使用する必要があります。

.info:nth-of-type(2) span:first-of-type { 
 
    color: #f00; 
 
}

<div class="info"> 
 
    <span>Plan</span> 
 
    <div class="price"> 
 
    <span>95<sup>99</sup></span> 
 
    <span>dollars</span> 
 
    </div> 
 
</div> 
 

 
<div class="info"> 
 
    <span>Plan</span> 
 
    <div class="price"> 
 
    <span>95<sup>99</sup></span> 
 
    <span>dollars</span> 
 
    </div> 
 
</div> 
 

 
<div class="info"> 
 
    <span>Plan</span> 
 
    <div class="price"> 
 
    <span>95<sup>99</sup></span> 
 
    <span>dollars</span> 
 
    </div> 
 
</div>