CSSで3番目以降を:nth-child(n + 3)で書く

　CSS には :nth-child() - CSS: Cascading Style Sheets | MDN という疑似クラスがあって、何番目の兄弟かを指定できる。 :nth-child(3) とかやると 3番目、みたいな感じで、 1 始まりになっている。

li:nth-child(3) {
  background-color: gold;
  font-size: 2em;
}

　これの書き方に :nth-child(2n + 1) みたいなものがあって、こうすると奇数番目だけ指定できる。これは 2n だけじゃなくて、たとえば 5n にすれば 5個おきになる。

li:nth-child(2n + 1) {
  background-color: gold;
  font-size: 2em;
}

　そして :nth-child(n + 3) とかすると、 1個おき (3個オフセット) ということで、 3番目以降全部を指定できる。

li:nth-child(n + 3) {
  background-color: gold;
  font-size: 2em;
}

　これは面白くて、 :nth-child(-n + 3) とか書くと 1〜3番目だけを指定できる (n が 0 から増えていくので、マイナスをつけておくと、 3 からどんどん減っていく、という感じ)。

li:nth-child(-n + 3) {
  background-color: gold;
  font-size: 2em;
}

　注意として、この場合は最初の 3つになるので、 n + 3 の結果を反転させたい場合は -n + 2 と書く必要がある (例でいうと n + 3 でも -n + 3 でも福禄寿が大きい)。

　ブラウザがこういうのをどうやって計算してるのか (特に n とか書いたときいつまで計算したらいいかどう判断してるのかとか) が気になる。

hogashi.*