nth-child() でx個目以降を指定するcss

『x個目を指定』『偶数を指定』などの方法は良く見るけど、『x個目以降』というのが分からなかったので調べてみた。

例えば5個目以降のliを指定する場合

li:nth-child(n + 5) {
  /* css指定 */
}

また、5個目までを指定する場合

li:nth-child(-n + 5) {
  /* css指定 */
}

nth-child()ってつまり

  • nth-child(X) X個目の要素を指定
  • X内のnは0以上の任意の整数

なので

偶数

li:nth-child(2n)

奇数

li:nth-child(2n + 1)

となる