【CSS】nth-childを使って行の色を交互に設定する!

CSSにはnth-childという行の色を交互に設定する便利なセレクターがあります。

nth-childは、セレクターの子要素のn番目にスタイルを適用させることができる擬似クラスであり、奇数番号の要素や偶数番号の要素、n番目の要素のなどの特定の要素を指定することができます。

その為、要素が集まっている表などで交互に背景色を設定し見やすくしたい場合に使用したり、表の中で大事な部分を強調したい場合に役立ちます。

また、前から数えてn番目からm個ごとに適用といった複雑な指定をすることもできます。

今回は、CSSのnth-childを使って行の色を交互に設定する方法を以下の内容で解説していきます。

⚫︎ 偶数番目の行に色を適用する場合
⚫︎ 奇数番目の行に色を適用する場合
⚫︎ n番目の行に色を適用する場合
⚫︎ 決まった法則で行の色を適用する場合

⚫︎ 最初の行だけ色を変更する場合
⚫︎ 最後の行だけ色を変更する場合

nth-childとは

nth-childとは擬似クラスのひとつであり、セレクタに追加して条件を指定することで子要素のn番目にスタイルを適用させることができます。

nth-childの書き方

nth-childの書き方は下記となります。

セレクターの後にnth-childを追記し、()に整数などの引数を指定することで、セレクターの子要素のn番目にスタイルを適用させることができます。

また、()には整数だけでなく、偶数番目を指定する「even」や奇数番目を指定する「add」、何番目から何個ごとと指定する「数式」を指定することもできます。

行の色を交互に設定するサンプルコード

行の色を交互に設定するサンプルコードを紹介します。

偶数番目の行に色を適用する場合

偶数番目の行に色を適用する場合は、nth-childの引数にevenを指定します。

sample.html

style.css

出力結果

nth-childにevenを指定したことで、テーブルの偶数番目の行の色が変わっています。

奇数番目の行に色を適用する場合

偶数番目の行に色を適用する場合は、nth-childの引数にoddを指定します。

sample.html

style.css

出力結果

nth-childにaddを指定したことで、テーブルの奇数番目の行の色が変わっています。

行のn番目に色を適用する場合

行のn番目に色を適用する場合は、nth-childの引数に整数を指定します。
nth-childの引数に整数を指定すると、対象とする要素がある階層の中で先頭から数えてその数字番目の要素が適用対象となります。

sample.html

style.css

出力結果

nth-childの引数に1と5を指定した為、1番目と5番目のテーブルの行の色が変わっています。

決まった法則で行の色を適用する場合

決まった法則で行の色を適用する場合は、nth-childの引数にan+bというパターン数式を指定します。
パターン数式を指定することで「n番目からm個ごと」にといったように、決まった法則で行の色を適用することができます。

この数式ではnはそのままでaとbが整数に置き換わり、nは{0,1,2,3…}と自動的に代入されていきます。
例えば、パターン数式が5n+1の場合、{1,6,11,16,21…}番目の要素が対象となります。

sample.html

style.css

出力結果

nth-childに3n+1のパターン数式を指定した為、1番目と4番目と7番目のテーブルの行の色が変わっています。

最初の行だけ色を変更する場合

最初の行だけ色を変更する場合は、first-childを使用します。

sample.html

style.css

出力結果

first-childによってテーブルの一番最初(今回だと1番目)の行の色が変わっています。

最後の行だけ色を変更する場合

最後の行だけ色を変更する場合は、last-childを使用します。

sample.html

style.css

出力結果

first-childによってテーブルの一番最後(今回だと7番目)の行の色が変わっています。

今回のポイント

nth-childで行の色を交互に設定

⚫︎ テーブルなど行の色を交互に設定するにはnth-childを使用する

⚫︎ nth-childはセレクターの子要素のn番目にスタイルを適用させることができる擬似クラスである

⚫︎ 偶数番目の行に色を適用する場合は、nth-childの引数にevenを指定する

⚫︎ 奇数番目の行に色を適用する場合は、nth-childの引数にoddを指定します。

⚫︎ 行のn番目に色を適用する場合は、nth-childの引数に整数を指定する

⚫︎ 決まった法則で行の色を適用する場合は、nth-childの引数にan+bというパターン数式を指定する

⚫︎ 最初の行だけ色を変更する場合は、first-childを使用する

⚫︎ 最後の行だけ色を変更する場合は、last-childを使用する

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し