クラス名指定にはnth-childを使用できない

| コメント(0)
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番目の要素に色が付きます。
各ブラウザの実装に期待です。

●対応状況

コメントする

このブログ記事について

このページは、gravity-worksが2022年6月 6日 10:05に書いたブログ記事です。

ひとつ前のブログ記事は「画面サイズによって読み込む画像を変更する」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。