CSS3 Pre-Reference



:nth-child()

前から順番で指定したパターンに合致

試す

コード

:nth-child(1) { /* ○ */ }
:nth-child(+2n+2) { /* ○ */ }
:nth-child(+4) { /* ○ */ }
p:nth-child(+4) { /* ○ */ }
p:nth-child(+ 5) { /* × */ }
p:nth-child(8 n) { /* × */ }
p:nth-child(9n) { /* ○ */ }

サンプル

○×と右側のOK/NGが合致していれば正しいです。

○:nth-child(1)

×p:nth-child(+2n+2)
これはdiv

○:nth-child(-2n + 5)

○p:nth-child(+2n+2)

○p:nth-child(+4)

×p:nth-child(+ 5)
数字と符号の間のスペースはダメ

×:nth-child(-2n + 5)
nは0以上の整数

×:nth-child(8 n)
数字とnの間のスペースはダメ

○:nth-child(9n)

コメントする


対応ブラウザ

Firefox
3.5~
Chrome/Safari
3.0~
Opera
InternetExplorer
9

パラメータ

レベル 3
参考文献 Selectors Level 3#6.6.5.2. :nth-child() pseudo-class

解説

順番でパターンに合致する要素を示す疑似クラスです。要素名が指定されていても、他の要素もカウントします

このセレクタは少し複雑です。括弧の間(「:nth-child(」と「)」の間)に入れるパターンは3通りあります。正規表現的に示すと、以下の通りです。

\s*[\+\-]?\d*n(\s*[\+\-]\s*\d+)?
\s*[\+\-]?\d+
odd|even

正規表現を知らない人にはちんぷんかんぷんだと思うので、例を挙げます。

1つ目は、例えば以下のような書き方になります。

 +1923n -32
-1n+ 0/*構文としては正解。ただしnには絶対値しか認められていないため、これはどれにも適用されない。 */
0n/* 構文としては正解。0番目の要素を指すので、どれにも適用されない */
n+12 /* 12番以降の要素すべてに適用される */
n /* すべての要素に適用 */

2つ目は、何番目の要素かをストレートに指定する方法です。負の値も指定可能になっていますが、1以上の値でないと要素が存在しないため、意味はありません。例えば、以下のような書き方です。

12
+7
-1
/* 指定は可能だが、どれにも適用されない */

最後のキーワード2つは簡単。”odd”が奇数個目の要素、”even”が偶数個目の要素を指します。つまり、それぞれ「2n+1」、「2n」と同等です。

ざっと表示テストした限りでは、各ブラウザの実装状況は思いの外、杜撰です。現時点で無難な使い方は、数字だけとan+b、an-b(a、bともに正の整数)でスペース無しが最も無難です。

トラックバック

投稿されたコメント