CSSセレクタで何番目以降･以前･偶数･奇数ごとに指定する方法

3番目以降あるいは3番目以前、偶数・奇数ごとに色を変えたい、デザインを変えたいってことありますよね？

とはいえ、いちいちクラスを指定するのはメンドウ！

そんなときに使える「CSSセレクタで何番目以降･以前･偶数･奇数ごとに指定する方法」を説明します。

結論：nth-child(n)を使う

CSSには下記の疑似クラスがあり、いちいちクラスを指定しなくても特定のルールに基づいて順番に指定してくれるものがあります。

詳しくはCSSセレクタ一覧をご覧ください。

そしてこのnの部分を変更することで偶数や奇数、倍数や一次方程式、何番目以降・以前といった指定ができます。

nの指定例一覧

nには0と正の整数（1,2,3,・・・）が無限に入ります。割り算、小数点は使えません。

nはそのままで数字任意で変更可能です。

何も指定していない状態

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

これが基準です。指定されていない部分は灰色です。これからの例において黄色になる部分が指定されている部分です。

2番目だけ

:nth-child(2)

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

カッコ内にnをいれず、数字だけ入れるとその数字番目の指定ができます。もちろん2にかぎらず、3でも4でもOKです。

偶数（2,4,6,8・・・）

:nth-child(even) or :nth-child(2n)

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

偶数は2の倍数のことをいいます。よって数式にすると2nです。表の行に交互に色を付けたいときなどに使えます。

奇数(1,3,5,7・・・)

:nth-child(odd) or :nth-child(2n+1)

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

奇数は偶数以外の数字です。偶数に1を足せば必ず奇数になります。カッコ内にはかけ算も足し算もそれから引き算も利用可能です。

3の倍数（3,6,9,12・・・）

:nth-child(3n)

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

比例の数式を使います。
例えばfloatやflexで3列にして最後（3番目）のmargin-rightは0にしたい、というときに便利です。
3に限らず4の倍数5の倍数でもOKです。

3の倍数+1（1,4,7,10・・・）

:nth-child(3n+1)

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

いよいよ数学っぽくなってきました。一次方程式です。
3列にして最初（1番目）のmargin-leftは0にしたい、というときに便利です。
3に限らず4の倍数5の倍数でもOKです。

3番目以降（3,4,5,6・・・）

:nth-child(n+3)

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

何番目以降というときは(n+数字)を指定します。nは0以降の数字なので、3+0,3+1,3+2,3+3・・・という状態になります。指定した数字3も含まれます。

6番目以前（6,5,4,3,2,1）

:nth-child(-n+6)

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

何番目以前というときは(数字-n)または(-n+数字)を指定します。nは0以降の数字なので、6-0、6-1、6-2、6-3・・・という状態になります。指定した数字6も含まれます。
このままだとマイナスになっちゃいますが、マイナス番目自体が存在しないので指定されないだけで問題ありません。

3番目以降6番目以前（3,4,5,6）

:nth-child(n+3):nth-child(-n+6)

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

何番目以降と何番目以前の書き方をくっつけることでand条件にしたものです。何番目から何番目の間、というように使えます。

3の倍数+1のうち5番目以降（7,10,13,16）

:nth-child(3n+1):nth-child(n+5)

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

さらに応用して倍数（一次方程式）と何番目以降をand条件にしたものです。

まとめ

このように:nth-child(n)を使えば、一定の法則の「何番目」に対して指定することができます。

以上、CSSセレクタで何番目以降･以前･偶数･奇数ごとに指定する方法した。