【CSS】特定の子要素にクラス反映させる方法8選

魔物が現れた

部分的に子要素にクラスを反映させたい〜。どうしよ〜。

今回は特定の子要素にクラスを反映させる方法を解説します。

いろいろな指定の仕方があり、あらゆる場面で使うことができます。
例えば要素の並び方によって特定の子要素だけ余白をつけたいよ〜というときなど役立ちます。

特定の子要素にクラス反映させる方法8選

See the Pen Untitled by kento-n96 (@kento-n96) on CodePen.

/* 最初の子要素を赤色にする */
.first li:first-child {
  color: red;
}

/* 最後の子要素を青色にする */
.last li:last-child {
  color: blue;
}

「:first-child」で最初の子要素を指定、「:last-child」で最後の子要素を指定します。

See the Pen Untitled by kento-n96 (@kento-n96) on CodePen.

/* 3番目の子要素を赤色にする */
.choose li:nth-child(3) {
  color: red;
}

/* 5番目の子要素を青色にする */
.choose li:nth-child(5) {
  color: blue;
}

「:nth-child(3)」で特定の子要素を指定します。
( ) 内の数字で何番目の子要素か指定できます。「:nth-child(5)」なら5番目になります。

See the Pen Untitled by kento-n96 (@kento-n96) on CodePen.

/* 3以上の子要素を赤くする */
.up li:nth-child(n + 3) {
  color: red;
}

「:nth-child(n + 3)」で何番目以上かを指定します。
(n + 番号)の番号の部分に入れた数字以上を指定することができます。

See the Pen Untitled by kento-n96 (@kento-n96) on CodePen.

/* 奇数の子要素を青色にする */
.odd-number li:nth-child(odd) {
  color: blue;
}

/* 偶数の子要素を赤色にする */
.even-number li:nth-child(even) {
  color: red;
}

「:nth-child(odd) 」で奇数を指定、「:nth-child(even)」で偶数を指定できます。
和訳すると、odd =「奇数」/ even =「偶数」です。

See the Pen Untitled by kento-n96 (@kento-n96) on CodePen.

/* 3の倍数を青色にする */
.double li:nth-child(3n) {
  color: blue;
}

/* 4の倍数を赤色にする */
.double li:nth-child(4n) {
  color: red;
}

「:nth-child(3n)」で特定の倍数を指定できます。
（4n）なら4の倍数、（5n）なら5の倍数になります。

See the Pen Untitled by kento-n96 (@kento-n96) on CodePen.

/* 2つ目の子要素以外を赤色にする */
.not li:not(:nth-child(2)) {
  color: red;
}

「:not(:nth-child(2)) 」で特定の子要素以外を指定できます。

「:not(: ~~ )」カッコ内で除外する子要素を指定する。

指定の仕方が色々あり、忘れることが多いので備忘録としてまとめました。
今回紹介した子要素の指定の仕方は一部なので他にも指定の仕方があります。

最後まで読んでいただきありがとうございました。
ご参考に慣れば幸いです。