偶数や奇数など指定した規則で装飾先を限定できるCSSの書き方がある

nth-child疑似クラス使用例

▲nth-child疑似クラスのソース例

リストやテーブルなど、多数の項目が連続する要素に対して、
  • 偶数番目だけに適用するスタイル
  • 奇数番目だけに適用するスタイル
などのように、任意の規則で一部分だけに異なる装飾を施す方法がCSSには用意されています。それが、nth-child疑似クラスです。図のように短い記述で実現できる便利なCSSです。


 
1行おきに異なる背景色を加えるCSS
例えば下図のように、行数の多い表や項目数の多いリストでは、1行ごとに色分け表示すると見やすくなります。このような装飾は、昔ならHTML側で各行にclass属性を付加しなければ実現できませんでした。しかし、CSS3で追加されたnth-child疑似クラスを使えば、HTMLソース側に何も書き加えることなく、CSSソース側の記述だけでこのような装飾が作れます。

表やリストの装飾を、偶数行と奇数行とで1行おきに変化させると見やすくなる

表やリストの装飾を、偶数行と奇数行とで1行おきに変化させると見やすくなる


倍数や指定箇所など、装飾対象の位置を柔軟に指定可能
このnth-child疑似クラスを使って実現できるのは、交互に装飾を切り替えるだけではありません。「3つおき」・「4つおき」のように任意の倍数を指定したり、「最初のみ」・「先頭から3つ」・「最後から4つ」・「5番目のみ」などのように任意の場所を指定することもできます。

リストの順序を元にCSS3で装飾を施した例(IE9での表示例)

リスト項目の位置(順番)に応じて装飾を変更した表示例


上図は、後述のサンプルページを表示した例です。左から右、上から下へ向かって、
  • (上側の左) 奇数行と偶数行とで装飾を分ける
  • (上側の中) 3行おきに装飾を分ける
  • (上側の右) 4行おきに装飾を分ける
  • (下側の左) 最初の3行と、残りの装飾を分ける
  • (下側の中) 最後の3行と、残りの装飾を分ける
  • (下側の右) 先頭行と最終行だけを個別に装飾
……となっています。これらの装飾はすべて、HTML側にclass属性などを加えることなく、CSS3のnth-child疑似クラスを使うだけで実現しています。

リストや表だけではなく、どんな要素にでも適用可能

先ほどの図では、各サンプルを囲んでいる灰色の枠線が、
  • 奇数番目では「四角枠」に
  • 偶数番目では「丸枠」に
なっていました(下図参照)。このように、装飾対象はリスト項目や表などに限りません。div要素やp要素などで作るブロックも、順序に応じて装飾を変えられます。

奇数番目のボックス(div要素)のみを対象に装飾もできる

奇数番目のボックス(div要素)のみを対象にして装飾している例


上記でご紹介したように、CSS3のnth-child疑似クラスを使うと、たくさんある要素を「偶数番目・奇数番目などの1行おき」や「先頭から3つだけ」などのような一定の規則で簡単に装飾できます。今回は、このnth-child疑似クラスの簡単な書き方を、表示例と共にご紹介いたします。

それでは次のページから、nth-child疑似クラスの具体的な記述方法を見てみましょう