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

Category : CSS

: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) でも同じ結果になります。n の考え方の例として出しましたがちょっとよくなかったかもしれません。説明不足で申し訳ないです。
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 形式のときの nb の間にある +/- の前後に入れることができる。

/* これは 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) {}

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

Trackbacks & Pingbacks

Leave a Reply