意外と知られていないCSSのnth-childの使い方

nth-child(数字)

:nth-child(4)で4番目を指定。

:nth-child(0)や:nth-child(11)など存在していない数字は指定していないのと同じ結果になる

.n1 > li:nth-child(4) {
  background: #C00;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

nth-childはnotで反転できる

前述の:nth-child(4)は:not:nth-child(4)にすることで4番目以外を選択できる。

.n1x > li:not(:nth-child(4)) {
  background: #C00;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

奇数を選択

:nth-child(odd)で奇数を選択。

.n2 > li:nth-child(odd) {
  background: #C00;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

偶数を選択

:nth-child(even)で偶数を選択。

.n3 > li:nth-child(even) {
  background: #C00;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

3の倍数ずつ選択

:nth-child(3n)で3の倍数ずつ選択。

.n3x > li:nth-child(3n) {
  background: #C00;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

最後から2つ目を選択

:nth-last-child(2)で最後から2番目を選択。

.n4 > li:nth-last-child(2) {
  background: #C00;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

最初を選択

:nth-child(1)または:first-of-typeを使う。

.n5 > li:first-of-type {
  background: #C00;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

最後を選択

nth-last-child(1)または:last-of-typeを使う。

.n6 > li:last-of-type {
  background: #C00;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

最初から3番目までを選択

:nth-child(-n+3)を使う。

.n7 > li:nth-child(-n+3) {
  background: #C00;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

最後からうしろから数えて3番目までを選択

:nth-last-child(-n+3)使う。

.n8 > li:nth-last-child(-n+3) {
  background: #C00;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

4番目以降を選択

:nth-child(n+4)を使う。

.n9 > li:nth-child(n+4) {
  background: #C00;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

うしろから4番目以降を選択

:nth-last-child(n+4)を使う。

.n10 > li:nth-last-child(n+4) {
  background: #C00;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

4番目以降、うしろから4番目以降を選択

:nth-child(n+4):nth-last-child(n+4)を使う。

.n11 > li:nth-child(n+4):nth-last-child(n+4) {
  background: #C00;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

最初と最後を選択

:not(:nth-child(2):nth-last-child(2))だと正しく選択されない。

.nflx > li:not(:nth-child(2):nth-last-child(2)) {
  background: #C00;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

正しくは :first-of-typeと:last-of-typeをそれぞれ指定する

.nfl > li:first-of-type,
.nfl > li:last-of-type {
  background: #C00;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

最初と最後以外を選択

:first-of-typeと:last-of-typeを:notでそれぞれ指定してはならない。

これだと全選択になってしまう。

.nn > li:not(:first-of-type),
.nn > li:not(:last-of-type) {
  background: #C00;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

:nth-child(n+2):nth-last-child(n+2)を使う。

.nnn > li:nth-child(n+2):nth-last-child(n+2) {
  background: #C00;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10