x番目の要素にスタイルを当てる擬似クラス nth-child ですが、クラス名と合わせて使用すると思った通りの動きをしないことがあります。
<p>テキスト</p>
<p>テキスト</p>
<p class="style">テキスト</p>
<p class="style">テキスト</p>
例えば上記のようなhtmlがあったときに、.styleクラスを持った2番目の要素に色をつけようと、
以下のように指定しても色が付きません。
.style:nth-child(2){
color: red;
}
この場合は「子要素の2番目が.styleクラスを持つ場合」という条件になるため、致する要素がなくスタイルが適用されません。
.style:nth-child(3){
color: red;
}
上記のようにすると3番目の文字色が赤になります。
ちなみに、現在（2022年6月）ではまだほとんどのブラウザで使用できないのですが、新しい記述方法として以下のような指定が追加されたようです。
p:nth-child(2 of .style){
color: red;
}
これがまさに上記でやろうとしていたことで、
.styleクラスを持った2番目の要素に色が付きます。
各ブラウザの実装に期待です。
●対応状況
コメントする