同じ種類のタグがリストみたいにいくつも並んでいて、3番目以降からスタイルを変えたいなんてときの方法。

疑似要素を使ってnth-child(n + 3)とすると、それができます。

3の部分はお好きな数字を。4番目以降にしたければn + 4、5番目以降にしたければn + 5という形で指定してあげます。

以下はサンプルです。

See the Pen css疑似要素 nth-childでn番目以降を適用範囲にする by Makoto Ohnami (@zohnami) on CodePen.

以下のような形でnth-childを使って指定してあげます。

.box:nth-child(n + 3) {
  color: #302833;
  font-weight: bold;
}

リストの途中からスタイルを変えたいことなんてある？って感じもしますが、たとえばランキング表とかで1〜3位は段階的に派手に目立たせたいとか、リストを上下にスクロールできるんだけど、上下の端の方は少し透明にしたい、とかそんなときには役に立つかもしれません。

この記事の環境情報

  • Google Chrome 108.0.5359.124