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

疑似セレクタ(:nth-last-child(n))の評価

頻出度

(5.0)

重要度

(5.0)

総合評価

(5.0)

疑似セレクタ「:nth-last-child(n)」は親要素内で指定した要素が最後からn番目の子要素であるときにスタイルを適用します。

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

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

・・・

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

・・・

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

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

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

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