Written by Kasumi

CSSのnth-childを使い、子要素の最初、最後、偶数奇数、何番目以降を指定する方法

CSSのnth-childを使って、子要素の最初、最後、偶数奇数、何番目以降を指定する方法が知りたい!

このような疑問に回答します。

本記事では、nth-childを使って特定の子要素に対し、スタイルを適用する仕方を紹介します。

以下より、コードペンを用い、例を紹介していきます。
nth-childを指定した子要素に対しては、テキストを赤色にしています。

nth-childを使って 、何番目にある子要素を指定

See the Pen nth-child(何番目にある子要素を指定) by Kohei (@kouk05) on CodePen.dark

nth-childを使って、2番目にある子要素を指定した例です↑ ↑

対象の子要素のセレクタに、以下疑似クラスをつけることで実装可能です。

:nth-child(2)

()内の数値を、指定したい子要素の値にするだけでOK

nth-childを使って、子要素の最初・最後を指定

See the Pen nth-child(子要素の最初・最後) by Kohei (@kouk05) on CodePen.dark

nth-childを使って、子要素の最初・最後を指定した例です↑ ↑

対象の子要素のセレクタに、以下疑似クラスをつけることで実装可能です。

子要素の最初
:first-child

子要素の最後
:last-child

nth-childを使って、子要素の偶数番目、奇数番目を指定

See the Pen nth-child(子要素の偶数・奇数指定) by Kohei (@kouk05) on CodePen.dark

nth-childを使って、子要素の偶数番目、奇数番目を指定した例です↑ ↑

対象の子要素のセレクタに、以下疑似クラスをつけることで実装可能です。

子要素の偶数番目
:nth-child(even)

子要素の奇数番目
:nth-child(odd)

nth-childを使って、子要素の何番目以降を指定

See the Pen nth-child(子要素の何番目以降) by Kohei (@kouk05) on CodePen.dark

nth-childを使って、子要素の5番目以降を指定した例です。

対象の子要素のセレクタに、以下疑似クラスをつけることで実装可能です。

:nth-child(n+5)

↑n+の後の数値を、何番目以降にしたい値に変更すればOK

まとめ

結構便利なnth-childですが、IEで対応されてない場合があるので注意してください!

以上で解説を終わります。

目次

関連記事

WordPress プログラミング

【ワードプレス】親子カテゴリ・親子ターム順にリンクリストを自動で表示する方法

更新日:2022.05.31
3429
HTMLCSS

【CSSメディアクエリ】タブレットのみにブレイクポイントをあてる方法

2023.08.29
1207
WordPress プログラミング

wordpressパーマリンクの設定で一部だけリンク設定を変更する方法

更新日:2020.07.18
2499
HTMLCSS

HTMLタグのデフォルトCSSを指定したタグだけ全て無効にする方法【allプロパティを使おう】

2023.01.12
1030