CSSの「nth-child」で n番目以降を指定する方法

2023年1月5日木曜日

CSS

t f B! P L

「nth-child」は n番目、n番目以降、n番目まで対応

CSSの擬似クラスである :nth-child は、例えば :nth-child(2) と指定すると、兄弟要素の2番目を指定できる。

また、:nth-child は、n番目以降といった指定も可能で、例えば :nth-child(n + 2) とすると「2番目以降」の兄弟要素を指定できる。さらに、n番目までの指定にも対応しており、:nth-child(+n + 2) のようにすると、「2番目まで」の兄弟要素を指定できる。

試してみよう

n番目

■ HTML

<div>
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
</div>

■ CSS

.box {
  border: 1px solid black;
  height: 50px;
  width: 150px
}

.box:nth-child(2) {
  background: red;
}

■結果
2番目

n番目以降

※ HTMLは上と同じ

■ CSS

.box {
  border: 1px solid black;
  height: 50px;
  width: 150px;
}

.box:nth-child(n + 2) {
  background: red;
}

■結果
enter image description here

n番目まで

■ CSS

.box {
  border: 1px solid black;
  height: 50px;
  width: 150px;
}

.box:nth-child(-n + 2) {
  background: red;
}

■結果
enter image description here

まとめ

n番目を指定する cssはよく見かけるが、n番目以降、n番目までの指定方法も便利である。

スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

仕事募集もしていたり、していなかったり。

QooQ