【CSS】nth-childとは？基本的な使用例について

CSS(シー・エス・エス)

2024.09.30

この記事は約5分で読めます。

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

例えば、親要素から見て複数の要素がある中で、一部の要素のみ背景色を変えたいときに便利です。

基本的な使用例

例えば、以下のようにdivに項目が並んでいるとします。

<div class="container">
  <div>項目A</div>
  <div>項目B</div>
  <div>項目C</div>
  <div>項目D</div>
  <div>項目E</div>
  <div>項目F</div>
</div>

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

.container div:nth-child(5) {
  background: red;
}

と記述します。5番目のみ、背景色が赤くなります。

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

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

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

.container div:nth-child(4) {
  background: blue;
}

と記述すると、項目Dのみ背景が青くなります。

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

奇数: odd または 2n+1

.container div:nth-child(odd) {
  background: blue;
}
.container div:nth-child(2n+1) {
  background: blue;
}

偶数: even または 2n

.container div:nth-child(even) {
  background: blue;
}
.container div:nth-child(2n) {
  background: blue;
}

Xの倍数の番号にのみ適用するには、nth-child(Xn)とします。例えば3の倍数の要素に適用したいときには、

.container div:nth-child(3n) {
  background: blue;
}

と記述すると、3番目と6番目の背景色が青くなります。

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

.container div:nth-child(n+6) {
  background: blue;
}

と記述すると、6, 7, 8番目の項目の背景色が変わります。

Y番目までの要素に適用するには、nth-child(-n+Y)とします。例えば、5番目までの要素に適用したいときには、

.container div:nth-child(-n+5) {
  background: blue;
}

と記述すると、1〜5番目の要素がすべて適用されて背景色が変わります。

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

.container div:nth-child(3n+2) {
  background: blue;
}

と記述すると、「2,5,8」が適用されて背景色が変わります。

N番目以外に適用するには、notという否定疑似クラスを使います。例えば、4番目以外に適用したい場合には、

.container div:not(:nth-child(4)) {
  background: blue;
}

と記述すると、4番目以外の要素に適用されて背景色が変わります。

複数のnth-childを組み合わせることで複雑な指定ができます。

A番目からB番目まで

A番目からB番目までの要素に適用するには、(n+A)と(-n+B)を併せて使います。例えば、3番目から7番目までの要素に適用したいときには、

.container div:nth-child(n+3):nth-child(-n+7) {
  background: blue;
}

と記述します。

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

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

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

nth-childと似たような機能を持つ疑似クラスにnth-of-typeがあります。nth-childは親要素から見て兄弟要素の何番目にあるのかを指定し、nth-of-typeは指定した要素のみを数えます。

例：

<div>
  <h2>見出し1</h2>
  <div>段落1</div>
  <div>段落2</div>
  <div>段落3</div>
</div>

.container div:nth-child(3) {
  background: blue;
}
.container div:nth-of-type(3) {
  background: green;
}

div:nth-child(3)では2つ目のdiv要素が青くなり、div:nth-of-type(3)では3つ目のdiv要素が緑色になります。

nth-childは、式を作ることで様々な位置を指定できるため、複雑なコーディングの手間を省くことができます。nth-of-typeとの違いを理解し、適切に使い分けることが重要です。これらの機能を駆使して、スタイル適用を行うことができます。