【CSS】疑似クラスnth-childの使い方やnth-of-typeとの違いを解説

複数に並んだ要素の一部だけスタイルを変えたい、なんてときがありますよね。

CSS疑似クラスのnth-childを使うと、一部の要素のみを指定することができます。

知ってはいるけれど、指定方法がたくさんあって中々覚えられない、という方もいるかと思います。

今回は、CSS疑似クラスのnth-childの使い方を知っておきたい、という方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、CSS疑似クラスのnth-childを使って、思い通りのデザインを作れるようになりますよ。

ぜひ最後まで読んでくださいね！

nth-childとは？どんなときに使うもの？

nth-childは、CSSのセレクタに追加して使う疑似クラスの1つで、子要素の番号などを指定してスタイルを適用させることができます。

親要素から見て複数の要素がある中で、一部の要素のみ背景色を変えたい、といったときなどに使用します。

例えば、以下のようにリストに項目が並んでいるときに役立ちます。

<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
<li>項目5</li>
<li>項目6</li>
</ul>

このうち、5番目だけに別のスタイルを適用したいときには、

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

と記述します。

5番目のみ、背景色が赤くなっているのを確認できるかと思います。

このように、特定の場所にスタイルを指定したいときに使います。

nth-childのパターン例

CSSのnth-childは、式を使って、様々な条件を指定することができます。

ここでは、よく使うパターンを紹介していきますね。

HTMLは以下の共通のものを使うことにします。

<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
<li>項目5</li>
<li>項目6</li>
<li>項目7</li>
<li>項目8</li>
</ul>

N番目

N番目の要素のみにスタイルを適用したい場合には、nth-child(N)を使います。

例えば、4番目のみに適用したい場合、

li:nth-child(4) {
  background: blue;
}

と書きます。項目4のみ背景が青くなっているのが確認できるでしょうか？

一番基本的な指定ですので、必ず覚えましょう。

偶数と奇数

偶数と奇数の場合には、キーワードを使う方法と関数を使う方法があります。

奇数は「odd」、もしくは「2n+1」で適用できます。

/* 両方とも奇数番号の要素を示します */
li:nth-child(odd) {
  background: blue;
}
li:nth-child(2n+1) {
  background: blue;
}

偶数は「even」、もしくは「2n」で適用できます。

/* 両方とも偶数番号の要素を示します */
li:nth-child(even) {
  background: blue;
}
li:nth-child(2n) {
  background: blue;
}

奇数では「1, 3, 5, 7」、偶数では「2, 4, 6, 8」の要素の背景色が青くなります。

ちなみに、nは正の整数で、0から始まります。

倍数（Xn）

Xの倍数の番号にのみ適用するには、nth-child(Xn)とします。

例えば3の倍数の要素に適用したいときには、

li:nth-child(3n) {
  background: blue;
}

と書きます。今回は3番目と6番目の背景色が青くなりますね。

Y番目以降（n+Y）

Y番目以降のすべての要素に適用するには、nth-child(n+Y)とします。

例えば、6番目以降の要素に適用したいときには、

li:nth-child(n+6) {
  background: blue;
}

と書きます。6,7,8の項目の背景色が変わりますね。

Y番目まで（-n+Y）

上記とは逆のY番目までの要素に適用するには、nth-child(-n+Y)とします。

例えば、5番目までの要素に適用したいときには、

li:nth-child(-n+5) {
  background: blue;
}

nは0から始まるため、「-0+5=5」から始まり、数値が減っていきます。

その結果、5番目までの要素がすべて適用されて背景色が変わります。

倍数とY番目の組み合わせ（Xn+Y）

上記2つを組み合わせて、何番目から何個ごと、というような式を作ります。

例えば2番目から3個ごとの場合には、

li:nth-child(3n+2) {
  background: blue;
}

と書きます。「2,5,8」が適用されて背景色が変わります。

N番目以外

N番目以外に適用するには、notという否定疑似クラスを使います。

例えば、4番目以外に適用したい場合には、

li:not(:nth-child(4)) {
  background: blue;
}

と書きます。これで4番目以外の要素に適用されて背景色が変わります。

この方法以外にも、notを使えば、ここまで紹介してきた指定を否定する指定を作ることができます。

複数のnth-childを組み合わせる

これまで1つのnth-childで適用する要素を選択してきましたね。

複数のnth-childを組み合わせることで複雑な指定ができます。いくつか紹介していきましょう。

A番目からB番目まで

A番目からB番目までの要素に適用するには、(n+A)と(-n+B)を併せて使います。

例えば、3番目から7番目までの要素に適用したいときには、

li:nth-child(n+3):nth-child(-n+7) {
  background: blue;
}

と書きます。

要素数がN個のときそのすべて

要素数の個数を限定して、スタイルを適用させることができます。

要素数が8個のときに、そのすべての要素を適用させるときには、

li:first-child:nth-last-child(8),
li:first-child:nth-last-child(8) ~ li {
  background: blue;
}

と書きます。ここで、新しく疑似クラスのfirst-childとnth-last-childが出てきましたね。

first-childは、要素内で最初に出てくる要素を示します。

また、nth-last-childは、最後から数えてN番目の要素を示します。

「li:first-child:nth-last-child(8)」とすることで、最初の要素かつ最後から8番目の要素を指定します。

続いての「li:first-child:nth-last-child(8) ~ li」は、先ほどの要素から、後ろに続くli要素すべてにスタイルを適用するものですね。

この方法を使うことで、要素が8個だったときにのみ、スタイルが適用されるようになります。

N個以上のときそのすべて

要素数がN個以上のときに、そのすべての要素にスタイルを適用する場合にも、先ほどのnth-last-childを使います。

例えば、要素が5個以上のときには、

li:nth-last-child(n+5),
li:nth-last-child(n+5) ~ li {
  background: blue;
}

と書きます。要素の数が5個未満だった場合、nth-last-child(5)の要素は存在しないので、スタイルは適用されません。

5個以上ある場合には、最後から数えて(n+5)番目の要素と、その要素から後ろのli要素全てにスタイルが適用されることになります。

nは1つずつ増えていくので、結果的にすべての要素が適用されることがわかりますね。

nth-childとnth-of-typeの違いについて

nth-childと似たような機能を持つ疑似クラス、nth-of-typeを見たことはないでしょうか？

どちらを指定しても同じ結果になることがあり、ややこしい面もありますが、両者は要素を数えるときにそれぞれ別の数え方をします。

nth-childは、ここまで述べてきた通り、親要素から見て兄弟要素の何番目にあるのか、を指定します。

兄弟要素の種類がバラバラであったとしても、上から順番に数えたものです。

対して、nth-of-typeは指定した要素のみを数えます。

<div>
  <h2>h2要素</h2>
  <p>p要素1</p>
  <p>p要素2</p>
  <p>p要素3</p>
</div>

上記の要素に、nth-childとnth-of-typeでスタイルを適用します。

p:nth-child(3) {
  background: blue;
}
p:nth-of-type(3) {
  background: green;
}

これらのスタイルを適用させると、2つ目のp要素は背景色が青くなり、3つ目のp要素は緑色になります。

同じ数値を入力しても、異なる結果になりましたね。

まとめ：nth-childを覚えてコーディングを効率的に

今回は、CSS疑似クラスのnth-childについて、使い方のパターン例をいくつか解説しました。

疑似クラスnth-of-typeとの違いも説明しましたね。

nth-childは式を作ることで様々な位置を指定できるため、複雑なコーディングの手間を省くことができます。

ぜひ、使用してみてください。今回の記事が参考になれば幸いです。

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！