[CSS] 疑似セレクタ「:nth-of-type(n)」でn番目の子要素にスタイルを適用しよう!

疑似セレクタ(:nth-of-type(n))の評価

頻出度

(5.0)

重要度

(5.0)

総合評価

(5.0)

疑似セレクタ「:nth-of-type(n)」は親要素内で指定した要素と同一の要素のみを数えてn番目にある要素にスタイルを適用します。

(n)には数値、数式、odd(奇数)やeven(偶数)などのキーワードを指定できます。

それでは疑似セレクタ「:nth-of-type(n)」の使い方をみていきましょう。

・・・

<div>
 <h2>疑似セレクタ「:nth-of-type(n)」の使い方</h2>
 <p>1行目の段落</p>
 <p>2行目の段落</p>
 <p>3行目の段落</p>
 <p>4行目の段落</p>
</div>

・・・

2行目と4行目の「p」要素を「青色」に変更したい場合はどのようにしたらいいのでしょうか?

その場合、疑似セレクタ「:nth-child(even)」を利用しましょう。

div p:nth-child(even) {
 color: blue;
}

疑似セレクタはなかなかイメージしづらいので実際に使ってみてどのようにスタイルが適用されるか確認するといいかと思います。