SoyaBlog

これを見れば解決しそうや

HOME>CSS>○番目の要素を指定するnth-childについて解説
ブログ投稿日時：
ブログ更新日時：
○番目の要素を指定するnth-childについて解説

○番目の要素を指定するnth-childについて解説

  1. nth-child とは
  2. :first-child について
  3. :nth-child(X) について
  4. :nth-child(-n + X) について
  5. :nth-child(n + X) について
  6. :last-child について
  7. :nth-last-child(X) について
  8. :nth-last-child(n + X) について
  9. :nth-child(Xn) について
  10. :nth-child(odd) について
  11. :nth-child(even) について
  12. 今回のまとめ
1.

nth-child とは

nth-child は、○番目の要素のみスタイルを変更する指定方法です。

nth-child は下記の通り、様々な指定方法があります。

nth-childの指定方法nth-childの内容
:first-child最初の要素のみスタイルを適用
:nth-child(X)最初からX番目の要素にスタイルを適用
:nth-child(-n + X)最初からX番目までの要素にスタイルを適用
:nth-child(n + X)X番目の要素からスタイルを適用
:last-child最後の要素のみスタイルを適用
:nth-last-child(X)最後からX番目の要素にスタイルを適用
:nth-last-child(n + X)最後から見てX番目から前の要素にスタイルを適用
:nth-child(Xn)Xの倍数の要素にスタイルを適用
:nth-child(odd)奇数番目の要素にスタイルを適用
:nth-child(even)偶数番目の要素にスタイルを適用
2.

:first-child について

:first-child は最初の要素のみスタイルを適用します。

それでは、:first-child の指定方法と表示を確認していきましょう。

<div class="items">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
.items {
  display: flex;
  gap: 16px;
  width: 100%;
}

.item {
  width: calc(100% - 16px * 4 / 5);
  height: 200px;
  background-color: #ff0000;
}

.item:first-child {
  background-color: #0000ff;
}
HTMLとCSSの表示

上記のように :first-child を指定すると最初の要素のみ背景色が青色になりました。

3.

:nth-child(X) について

:nth-child(X) は最初からX番目の要素にスタイルを適用します。

それでは、:nth-child(X) の指定方法と表示を確認していきましょう。

<div class="items">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
.items {
  display: flex;
  gap: 16px;
  width: 100%;
}

.item {
  width: calc(100% - 16px * 4 / 5);
  height: 200px;
  background-color: #ff0000;
}

.item:nth-child(3) {
  background-color: #0000ff;
}
HTMLとCSSの表示

上記のように :nth-child(X) を指定すると最初からX番目の要素にスタイルを適用します。

今回は、:nth-child(3) を指定しているので、最初から3番目の要素に背景色を青色にしています。

4.

:nth-child(-n + X) について

:nth-child(-n + X) は最初からX番目までの要素にスタイルを適用します。

それでは、:nth-child(-n + X) の指定方法と表示を確認していきましょう。

<div class="items">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
.items {
  display: flex;
  gap: 16px;
  width: 100%;
}

.item {
  width: calc(100% - 16px * 4 / 5);
  height: 200px;
  background-color: #ff0000;
}

.item:nth-child(-n + 3) {
  background-color: #0000ff;
}
HTMLとCSSの表示

上記のように :nth-child(-n + X) を指定すると最初からX番目までの要素にスタイルを適用します。

今回は、:nth-child(-n + 3) を指定しているので、最初から3番目までの要素に背景色を青色にしています。

5.

:nth-child(n + X) について

:nth-child(n + X) はX番目の要素からスタイルを適用します。

それでは、:nth-child(n + X) の指定方法と表示を確認していきましょう。

<div class="items">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
.items {
  display: flex;
  gap: 16px;
  width: 100%;
}

.item {
  width: calc(100% - 16px * 4 / 5);
  height: 200px;
  background-color: #ff0000;
}

.item:nth-child(n + 3) {
  background-color: #0000ff;
}
HTMLとCSSの表示

上記のように :nth-child(n + X) を指定するとX番目の要素からスタイルを適用します。

今回は、:nth-child(n + 3) を指定しているので、3番目の要素から背景色を青色にしています。

6.

:last-child について

:last-child は最後の要素のみスタイルを適用します。

それでは、:last-child の指定方法と表示を確認していきましょう。

<div class="items">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
.items {
  display: flex;
  gap: 16px;
  width: 100%;
}

.item {
  width: calc(100% - 16px * 4 / 5);
  height: 200px;
  background-color: #ff0000;
}

.item:last-child {
  background-color: #0000ff;
}
HTMLとCSSの表示

上記のように last-child を指定すると最後の要素のみ背景色が青くなりました。

7.

:nth-last-child(X) について

:nth-last-child(X) は最後からX番目の要素にスタイルを適用します。

それでは、:nth-last-child(X) の指定方法と表示を確認していきましょう。

<div class="items">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
.items {
  display: flex;
  gap: 16px;
  width: 100%;
}

.item {
  width: calc(100% - 16px * 4 / 5);
  height: 200px;
  background-color: #ff0000;
}

/* 最初のブロックだけ背景色を青色にする */
.item:nth-last-child(2) {
  background-color: #0000ff;
}
HTMLとCSSの表示

上記のように :nth-last-child(X) を指定すると最後からX番目の要素にスタイルを適用します。

今回は、:nth-last-child(2) を指定しているので、最後から2番目の要素のみ背景色を青色にしています。

8.

:nth-last-child(n + X) について

:nth-last-child(n + X) は最後から見てX番目から前の要素にスタイルを適用します。

それでは、:nth-last-child(n + X) の指定方法と表示を確認していきましょう。

<div class="items">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
.items {
  display: flex;
  gap: 16px;
  width: 100%;
}

.item {
  width: calc(100% - 16px * 4 / 5);
  height: 200px;
  background-color: #ff0000;
}

/* 最初のブロックだけ背景色を青色にする */
.item:nth-last-child(n + 3) {
  background-color: #0000ff;
}
HTMLとCSSの表示

上記のように :nth-last-child(n + X) を指定すると最後から見てX番目から前の要素にスタイルを適用します。

今回は、nth-last-child(n + 3) を指定しているので、最後から見て3番目から前の要素のみ背景色を青色にしています。

9.

:nth-child(Xn) について

:nth-child(Xn) はXの倍数の要素にスタイルを適用します。

それでは、:nth-child(Xn) の指定方法と表示を確認していきましょう。

<div class="items">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
.items {
  display: flex;
  gap: 16px;
  width: 100%;
}

.item {
  width: calc(100% - 16px * 4 / 5);
  height: 200px;
  background-color: #ff0000;
}

/* 最初のブロックだけ背景色を青色にする */
.item:nth-child(2n) {
  background-color: #0000ff;
}
HTMLとCSSの表示

上記のように :nth-child(Xn) を指定するとXの倍数の要素にスタイルを適用します。

今回は、:nth-child(2n) を指定しているので、2の倍数に該当する2つ目と4つ目の要素の背景色を青色にしています。

10.

:nth-child(odd) について

:nth-child(odd) は奇数番目の要素のみスタイルを適用します。

それでは、:nth-child(odd) の指定方法と表示を確認していきましょう。

<div class="items">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
.items {
  display: flex;
  gap: 16px;
  width: 100%;
}

.item {
  width: calc(100% - 16px * 4 / 5);
  height: 200px;
  background-color: #ff0000;
}

/* 最初のブロックだけ背景色を青色にする */
.item:nth-child(odd) {
  background-color: #0000ff;
}
HTMLとCSSの表示

上記のように :nth-child(odd) を指定すると奇数番目の要素のみスタイルを適用します。

今回は5つの要素があるため、1つ目と3つ目と5つ目の要素の背景色を青色にしています。

11.

:nth-child(even) について

:nth-child(even) は偶数番目の要素のみスタイルを適用します。

それでは、:nth-child(even) の指定方法と表示を確認していきましょう。

<div class="items">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
.items {
  display: flex;
  gap: 16px;
  width: 100%;
}

.item {
  width: calc(100% - 16px * 4 / 5);
  height: 200px;
  background-color: #ff0000;
}

/* 最初のブロックだけ背景色を青色にする */
.item:nth-child(even) {
  background-color: #0000ff;
}
HTMLとCSSの表示

上記のように :nth-child(even) を指定すると偶数番目の要素のみスタイルを適用します。

今回は5つの要素があるため、2つ目と4つ目の要素の背景色を青色にしています。

12.

今回のまとめ

この記事では、nth-child について解説しました。

nth-child は、○番目の要素のみスタイルを変更する指定方法です。

それぞれの指定方法を理解して使い分けていきましょう。

最後までお読みいただきありがとうございます。