【CSS】疑似クラスnth-child(n)を徹底解説！

2020年8月19日2020年11月2日

CSSのnth-childについて解説します。

疑似クラス「nth-child」とは

一言で言うと、n番目の子要素にスタイルを適用することができる疑似クラスです。

疑似クラスとは、要素の一部に対してスタイルを適応出来るクラスです。HTML文書の木構造には関係なく、主に装飾目的で利用します。

nthはn(Number)と4th, 5th, 10thなど「〜番目」を表すときに数字の後ろにつけるthです。childはそのまま「子要素」を表します。

奇数番目と偶数番目で色を変えたい、最初(最後)からn番目だけに適応したい、といった場合に便利です。

nth-childの記述の仕方

要素:nth-child(数字や数式など){適用するスタイルの内容}

こんな感じで記述します。

難しそうに見えますが、要素{スタイル}という一般的な記述にnth-child( )が加わっただけなので慣れれば大丈夫です。

nth-child( )の( )の中を数字や数式に書き換えることで、任意の箇所にスタイルを適応することが可能です。

具体的に見ていきましょう。

5番目だけ適応したい時

nth-child( )の( )の中に具体的な数字をいれることで、その番号だけにスタイルを適応することができます。

li:nth-child(5){color:red;}

最初の5番目までに適応したい時

数学で出てきた、数列みたいですね。

li:nth-child(-n+5){color:red;}

最初の5番目より後ろ(最初の5番目まで"以外")に適応したい時

こちらも割と使う数列第二弾です。これは2通りのやり方で書くことができます。

li:nth-child(n+6){color:red;}
/* あるいは */
li:not(:nth-child(n+6)){color:red;}

このように、「○○以外の全て」(exept○○)に適応させたい時は「:not()」を活用することもできます。

範囲の指定

上の2つを組み合わせることで範囲の指定も可能です。

ここからここまでスタイルを適応したい、という時に使います。例えば、3〜7に適応させたい時はこんな感じです。

li:nth-child(n+3):nth-child(-n+7){color:red;}

奇数・偶数だけに適応したい時

奇数だけ

「奇数」を意味するodd、もしくは2n+1で奇数番目だけに適応できます。

li:nth-child(odd){color:red;}
  /* あるいは */
li:nth-child(2n+1){color:red;}

偶数だけ

「偶数」を意味するeven、もしくは2nで偶数番目だけに適応できます。

li:nth-child(even){color:red;}
  /* あるいは */
li:nth-child(2n){color:red;}

掛け算

2n、３n、4nなど、任意の数の倍数にだけ適応することもできます。

例えば3の倍数にだけ適応したい時は3nです。

li:nth-child(3n){color:red;}

等差数列

最初の数に、ある一定の数を足し続ける数列です。

以下の例では、最初の数1から始まり、3を足していっています。

li:nth-child(3n+1){color:red;}

1番最後にだけ適応させたい時

last-childと書きます。lastなので、数字は書かなくて大丈夫。

li:last-child{color:red;}

最後からn番目にだけ適応させたい時

最後からn番目にだけ適応させたい時は、nth-last-child(n)と記述します。

例えば最後から2番目だったらこんな感じ。

li:nth-last-child(2){color:red;}

疑似クラスを使って書いたコードを実際に動かしてみたい

nth-childを実際に動かしてみたい時は、以下のサイトが便利です。

・CSS Trick

・W3schools

最後に

以上！

CSS難関の一つ、疑似クラスnth-childの解説でした！

より高度なデザインを作りたいときに便利です。

以下のコードはnth-childを使った一例です。良かったら参考にしてみてください。

See the Pen Side Bar Pastel by Yuhomyan (@yuhomyan) on CodePen.