CSSのnth-child疑似クラスを使って、指定番目の要素だけを装飾する方法

それでは、CSSのnth-child疑似クラスを使う具体的な記述方法を解説いたします。ここでは6つの表示サンプルと、それを実現するCSSソースを記載しています。それら6つの表示に使っているHTMLソースは、すべて共通して以下の通りです。
<ol>
   <li>ここは1番目の項目です。</li>
   <li>ここは2番目の項目です。</li>
   <li>ここは3番目の項目です。</li>
       :   :   :
   <li>ここは8番目の項目です。</li>
</ol>
このHTMLソースには何の属性も付加していない点がポイントです。class属性やid属性などがなくても、CSSソースに記述するnth-child疑似クラスを使うことで、特定の要素のみを装飾対象にできます。

【本記事で解説するCSSの書き方一覧】

奇数番目と偶数番目とで交互に装飾を分けるCSSの書き方

奇数と偶数で装飾を分ける

奇数行と偶数行で装飾を分ける

リストや表のように項目がたくさん並ぶ場合は、交互に装飾を分けると見やすくなります。図は奇数行を緑色で、偶数行を赤色で表示した例です。このように交互に異なる配色にしておくと、どの項目を読んでいるのかが明確になって読みやすくなります。

CSSのnth-child疑似クラスを使えば、このように交互に装飾を変えるのも簡単です。

偶数(2の倍数)番目だけを対象に装飾するには「:nth-child(2n)」と指定し、奇数(2の倍数+1)番目だけを対象に装飾するには「:nth-child(2n+1)」と指定します。具体的には、下記のようにCSSソースを記述します。

1項目ずつ交互に装飾を変化させたい場合のCSSソース:
li:nth-child(2n) {
   /* 偶数番目(2,4,6……番目)だけに適用されるCSS */
   color: red;
}
li:nth-child(2n+1) {
   /* 奇数番目(1,3,5……番目)だけに適用されるCSS */
   color: green;
}
上記のCSSソースでは、リスト項目(li要素)の偶数番目を赤色で、奇数番目を緑色で装飾しています。li要素以外を対象にしたい場合は、上記ソースの「li」部分を自由に書き換えて下さい。

3の倍数ごとに装飾を分けるCSSの書き方

3つずつ装飾を分ける

3つを1セットにして、3の倍数ごとに装飾を分ける

例えば、品名・仕様・価格のように3項目が1セットになったリストがたくさん並んでいる場合は、
  • 3種類の各項目を異なる色で表示した上で、
  • 1セットごとに余白を加えて区切る
などすると見やすくできるでしょう。

CSSのnth-child疑似クラスを使えば、このように3つを1セットにして3つ目ごとに装飾を変えるのも簡単です。

3番目,6番目,9番目……のように「3の倍数」番目だけを対象に装飾するには「:nth-child(3n)」と指定します。1番目,4番目,7番目……のように「3の倍数+1」番目だけを対象に装飾するには「:nth-child(3n+1)」と指定します。例えば以下のようにCSSソースを記述することで、3種類の装飾を順番に繰り返し適用できます。

3の倍数ごとに装飾したい場合のCSSソース:
li:nth-child(3n) {
   /* 3の倍数(=3,6,9……)番目だけに適用されるCSS */
   color: red;
   padding-bottom: 0.5em;
}
li:nth-child(3n+1) {
   /* 3の倍数+1(=1,4,7……)番目だけに適用されるCSS */
   color: blue;
}
li:nth-child(3n+2) {
   /* 3の倍数+2(=2,5,8……)番目だけに適用されるCSS */
   color: green;
}
上記のCSSソースでは、リスト項目のうち「3の倍数」番目を赤色で、「3の倍数+1」番目を青色で、「3の倍数+2」番目を緑色で装飾しています。さらに、3つごとに余白を挿入して見やすくするため、「3の倍数」の項目に対しては下側に余白(padding-bottom)も加えています。

4の倍数ごとに装飾を分けるCSSの書き方

4つずつ装飾を分ける

4つを1セットにして、4の倍数ごとに装飾を分ける

3の倍数が「3n」なら、4の倍数は「4n」です。このように、nth-child疑似クラスには正の整数なら何の倍数でも指定できます。7の倍数「7n」を指定してデザインを分ければ、曜日ごとに色を変える装飾も簡単に作れるでしょう。

4番目,8番目,12番目……のように「4の倍数」番目だけを対象に装飾するには「:nth-child(4n)」と指定します。1番目,5番目,9番目……のように「4の倍数+1」番目だけを対象に装飾するには「:nth-child(4n+1)」と指定します。具体的には、以下のようにCSSソースを記述します。

4の倍数ごとに装飾したい場合のCSSソース:
li:nth-child(4n) {
   /* 4の倍数(=4,8,12……)番目だけに適用されるCSS */
   padding-bottom: 0.5em;
   color: red;
}
li:nth-child(4n+1) {
   /* 4の倍数+1(=1,5,9……)番目だけに適用されるCSS */
   color: blue;
}
li:nth-child(4n+2) {
   /* 4の倍数+2(=2,6,10……)番目だけに適用されるCSS */
   color: green;
}
li:nth-child(4n+3) {
   /* 4の倍数+3(=3,7,11……)番目だけに適用されるCSS */
   color: #cccc00;
}
上記では、リスト項目のうち「4の倍数」番目を赤色で、「4の倍数+1」番目を青色で、「4の倍数+2」番目を緑色で、「4の倍数+3」番目を黄色(#cccc00)で装飾しています。さらに、4つごとに余白を挿入して見やすくするため、「4の倍数」の項目に対しては下側に余白(padding-bottom)を加えています。

補足:奇数・偶数を表す専用の書き方もある

上記では、2の倍数が「2n」、3の倍数が「3n」、4の倍数が「4n」のように話の流れを分かりやすくするために「数字+n」の書き方を紹介しました。しかし、実は奇数と偶数を指定する場合には、以下のような専用の書き方もあります。
:nth-child(even) {
   /* 偶数番目の要素だけに適用されるCSS */
   color: purple;
}
:nth-child(odd) {
   /* 奇数番目の要素だけに適用されるCSS */
   color: skyblue;
}
このように、偶数行など「2の倍数」番目を指定するには「2n」の代わりに偶数を表す英単語「even」と書けます。奇数行など「2の倍数+1」番目を指定するには「2n+1」の代わりに奇数を表す英単語「odd」と書けます。

どちらでも好きな書き方を使って下さい。


倍数以外の規則で装飾を分けるCSSの書き方もある

これまでにご紹介した3つのサンプルは、どれも倍数による指定でした。しかし、nth-child疑似クラスで指定できる規則は倍数だけではありません。先頭から3つだけ、末尾から5つだけ、先頭の1つだけ、終わりから2つ目だけ……などのように、任意の位置にある要素だけを装飾することもできます。

次のページでは、「先頭から指定個数だけ」に限定したり、特定の位置を決め打ちで指定する方法などをご紹介いたします。