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 とか書いたときいつまで計算したらいいかどう判断してるのかとか) が気になる。