2/4 CSSのnth-childで偶数/奇数行などn番目を装飾する方法 [ホームページ作成] All About

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の書き方
3の倍数ごとに装飾を分けるCSSの書き方
4の倍数ごとに装飾を分けるCSSの書き方
補足：奇数・偶数を表す専用の書き方もある
「最初の3つ」と「それ以降」とで装飾を分けるCSSの書き方 (※次のページ)
「最後から3つ」と「それ以前」とで装飾を分けるCSSの書き方 (※次のページ)
最初(先頭要素)と最後(末尾要素)だけを装飾するCSSの書き方 (※次のページ)
注意点：nth-child疑似クラスでの順番の解釈について (※次のページ)
参考：指定の要素だけの順番を指定できるnth-of-type疑似クラス (※次のページ)

奇数番目と偶数番目とで交互に装飾を分ける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つを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つを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つ目だけ……などのように、任意の位置にある要素だけを装飾することもできます。

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