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

意外と知られていない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
カテゴリーcss