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

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

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

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

■結果

n番目以降

※ HTMLは上と同じ

■ CSS

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

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

■結果

n番目まで

■ CSS

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

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

■結果

まとめ

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