Unformed Building

:nth-*擬似クラスのおさらいメモ

公開：
更新：

パーマリンク

:nth-*擬似クラスの引数の理解がいまいちだったのでおさらい。

構文について。
ここでのINTEGERは[0-9]+である。

nth
  : S*
      [
        ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? |
        ['-'|'+']? INTEGER |
        {O}{D}{D} |
        {E}{V}{E}{N}
      ]
    S*
  ;

nは0もしくは正の整数であるので、それを元に考えると分かりやすい。

たとえば:nth-child(n+1)の場合……

0 + 1 = 1
1 + 1 = 2
2 + 1 = 3
...

となる。

偶数番目の子を指定する場合には:nth-child(even)または:nth-child(2n)となるが、これも同様に

2 * 0 = 0
2 * 1 = 2
2 * 2 = 4
...

となる。

奇数番目:nth-child(odd), :nth-child(2n+1)は

2 * 0 + 1 = 1
2 * 1 + 1 = 3
2 * 2 + 1 = 5
...

以下はその他の例。

最初の子要素

:nth-child(0n+1)

0 * 0 + 1 = 1
0 * 1 + 1 = 1
0 * 2 + 1 = 1
...

（:first-childと同じ結果）

ご指摘がありましたが、もちろん:nth-child(1)でも同じ結果になります。

b番目以上の子要素

:nth-child(n+b)
たとえば5番目以上だとすると

0 + 5 = 5
1 + 5 = 6
2 + 5 = 7
...

b番目以下の子要素

:nth-child(-n+b)
たとえば5番目以下だとすると

-0 + 5 = 5
-1 + 5 = 4
-2 + 5 = 3
...

b番目以上、且つ奇数の子要素

:nth-child(n+b):nth-child(2n+1)でもいいけど
:nth-child(2n+b)とするとすっきりする。
たとえばbが5だとすると

2 * 0 + 5 = 5
2 * 1 + 5 = 7
2 * 2 + 5 = 9
...

その他の:nth-*擬似クラスの引数も同様。

また、構文を見れば分かる通り、スペースは括弧の内側、もしくはan+b形式のときのnとbの間にある+または-の前後に入れることができる。

/* これはOK */
:nth-child(2n+ 1) {}
:nth-child(2n +1) {}
:nth-child(2n + 1) {}
:nth-child( 2n) {}
:nth-child(2n ) {}
:nth-child( 2n ) {}
:nth-child( 2 ) {}
:nth-child( even ) {}

/* これはNG */
:nth-child(- n) {}
:nth-child(2 n) {}
:nth-child(+ 2) {}

もう大丈夫だと思いたい。