🍕

nth-child で 2 番目以降や 2 番目までなど範囲を指定する方法

に公開
CSS
tech

nth-childで、最初と最後の要素を指定するのはよくやるので覚えているのですが、
2番目以降から・偶数の時だけ・2番目までなどはいつも忘れてググっていたので自分用に暗記も兼ねてまとめました。
結論のコードはCodePenをご覧ください。

以下より内容をピックアップして解説しています。

前提

サンプルコードはcard__list--onwardsなどの名称で指定をしています。
BEMの設計に則り、Modifier部分を変更して対応しました。

2番目以降の背景色を変更

よく使う、n番目以降の指定方法です。

.card__list--onwards .card__item:nth-child(n + 2) {
  background-color: #d8e9f0;
}

2番目までの背景色を変更

.card__list--until .card__item:nth-child(-n + 2) {
  background-color: #d8e9f0;
}

2番目から5番目までの背景色を変更

.card__list--between .card__item:nth-child(n + 2):nth-child(-n + 5) {
  background-color: #d8e9f0;
}

偶数のときだけ背景色を変更

偶数・奇数の時だけ背景色変更は、要素がずらっと並んだときに見やすくするためにたまに使います。

.card__list--even .card__item:nth-child(even) {
  background-color: #d8e9f0;
}

奇数のときだけ背景色を変更

.card__list--odd .card__item:nth-child(odd) {
  background-color: #d8e9f0;
}

3の倍数のときだけ背景色を変更

.card__list--multiple .card__item:nth-child(3n) {
  background-color: #d8e9f0;
}

後ろから2つめのときだけ背景色を変更

.card__list--back .card__item::nth-last-child(2) {
  background-color: #d8e9f0;
}

まとめ

装飾をしたいけど、classをつけるほどでもないときに使えそうです。
BEMでclass名をつけるとどうしてもHTMLがごちゃついてしまいますが、CSSをうまく使えばすっきりさせられます。

ただ、要素の数が変わってしまうと順番が変わって意図しないCSSがあたってしまうので、あまり変更する予定のないものにだけ使うと良さそうです！

Discussion