[2] 擬似クラスである :nth-child()
, :nth-last-child()
,
:nth-of-type()
, :nth-last-of-type()
,
:first-child
, :last-child
,
:only-child
, :only-of-type
は、親要素中の要素の位置によって一致するものです。
[3] :nth-child()
は、最初の子要素を1番目として数えた時、
引数で指定された位置にある要素を表します >>1 6.6.5.2.。
:nth-of-type()
は更に要素名が同じ展開名であるものだけ数える、
との条件を加えたものです >>1 6.6.5.4.。
[4] :nth-last-child()
は、最後の子要素を1番目として数えた時、
引数で指定された位置にある要素を表します >>1 6.6.5.3.。
:nth-last-of-type()
は更に要素名が同じ展開名であるものだけ数える、
との条件を加えたものです >>1 6.6.5.5.。
[5] 次の擬似クラスはいずれも同じ意味です。ただし詳細度は異なることがあります。
:first-child
と :nth-child(1)
>>1 6.6.5.6.:first-of-type
と :nth-of-type(1)
>>1 6.6.5.8.:last-child
と :nth-last-child(1)
>>1 6.6.5.7.:last-of-type
と :nth-last-of-type(1)
>>1 6.6.5.9.:only-child
と :first-child:last-child
>>1 6.6.5.10.:only-of-type
と :first-of-type:last-of-type
>>1 6.6.5.11.[30] これらの擬似クラスによる要素の位置の計算においては、要素節点のみを数えます。 テキスト節点などは無視します。>>1 6.6.5.
[13] :nth-child
, :nth-last-child
,
:nth-of-type
, :nth-last-of-type
は括弧で括って要素の位置を表す文字列を指定しなければなりません。
[14] この値は、
... のいずれかでなければなりません。
an+b
[17] an+b
は、この式の n に0以上の整数を代入して得られる数値で表される位置を表します
>>1 6.6.5.2.。
[19] a と b は整数でなければなりません。数値は 0
... 9
の数字を連ねて表します。 +
や -
を符号として数値の前に付けることができます。ただし b については直前の +
のかわりに符号を使います。 >>1 6.6.5.2.
[22] a や b が 0 の時は項ごと省略できますが、両方を省略することはできません。
また最初の項の符号が +
なら、これも省略できます。>>1 6.6.5.2.
[23] 例えば 4n
(= 4n+0
) や 5
(= +5
= 0n+5
)
のように表せます。 0n+0
は 0
と等価ですが、これ以上は省略できません。
(ただし 0
は 0 番目を表し、要素は1番から数え始めるので、何とも一致しません。)
[24] a の絶対値が1なら、数値部分を省略できます。>>1 6.6.5.2.
[72] Chrome は -n
だけの値に対応していません。 (b が続く場合には対応しています。)
Firefox や Opera は対応しています。 (といっても -n
に一致する要素は存在しないので、
CSSOM に現れるかどうかの違いしかありませんが。)
[74] Firefox は \-n
という表記を -n
と同じ値とみなしますが、
Opera は非妥当とみなします。
[78] 同様に 2n-\31
を Firefox は 2n-1
とみなしますが、
Opera と Chrome は非妥当とみなします。
[59] n
はASCII大文字・小文字不区別です。
[63] >>60 は Firefox は対応していますが、 Chrome と Opera は対応していません。
[68] Firefox, Chrome, Opera 共に
整数と n
の間に注釈は入れられません。
[71] Opera では符号と n
の間に注釈を入れられますが、
Chrome と Firefox では入れられません。
even
と odd
[15] even
は 2n
と同じです >>1 6.6.5.2.。
偶数番目を表します。
[16] odd
は 2n+1
と同じです >>1 6.6.5.2.。
奇数番目を表します。
[65] Firefox と Chrome は escape に対応しています。 しかし Opera は対応していません。
[67] Firefox と Opera は 2n
, 2n+1
に正規化しているようですが、 Chrome は even
, odd
までしか正規化しないようです。 (2n
は 2n
のままです。)
[27] 引数の括弧の内側には空白を挿入できます。>>1 6.6.5.2.
[28] an+b
形式で2つの項が両方現れる場合の途中の
+
や -
の前後には空白を挿入できます。>>1 6.6.5.2.
[51] Firefox と Opera、 Chrome は >>28、>>29 の通りに実装しています。
[52] Chrome は >>28 の空白の箇所に注釈を入れることに対応していません。 Firefox と Opera は対応しています。
[54] Opera は1つ目の項 (または唯一の項) の符号と数字の間に注釈を認めていますが、 Firefox と Chrome は認めていません。
[12] 擬似クラスの種類を表す部分も引数もASCII大文字・小文字不区別です。
// ... /
, / ... //
, // ... //
[35] STTS2 や CSS2 の初期案では DL ~ //DT/
(//.../
= :first-child
)
や DL ~ /DD//
(/...//
= :last-child
) や
UL ~ //LI//
(//...//
= :only-child
) のような構文が提案されていました。
:first-child
[32] >>48 の次の WD である >>49 で旧構文は削除され、かわりに :first-child
が追加されました。
:first-child
:not-first-child
:last-child
:not-last-child
:first-of-type
:not-first-of-type
:last-of-type
:not-last-of-type
:only-of-type
:not-only-of-type
:only-child
:not-only-child
:nth-of-type
:not-nth-of-type
:nth-child
:not-nth-child
... が定義されていました。
[44] >>43 で :not()
が追加されたことにより、否定形はすべて削除されました。
[45] >>43 では :nth-last-child()
と :nth-last-of-type()
が追加されています。
[33] 結局最終的に選択子3では :last-child
, :first-of-type
,
:last-of-type
, :nth-child
,
:nth-of-type
, :nth-last-child
,
:nth-last-of-type
, :only-child
,
:only-of-type
が追加されました。
[47] XBL2 は影木の影響を受けないと規定していました。
[79] Re: [css-syntax] <an+b> grammar ( (Tab Atkins Jr. 著, 版)) http://lists.w3.org/Archives/Public/www-style/2013May/0308.html
[81] IRC logs: freenode / #whatwg / 20131029 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20131029#l-699
[82] Errata in REC-css3-selectors-20110929 ( ( 版)) http://www.w3.org/Style/2011/REC-css3-selectors-20110929-errata.html
[84] Acid3 and :first-child (Ms2ger著, ) https://lists.w3.org/Archives/Public/www-archive/2016Oct/0005.html
[85] Re: Acid3 and :first-child (Anne van Kesteren著, ) https://lists.w3.org/Archives/Public/www-archive/2017Jan/0014.html
[86] [selectors] Make the definition of :nth-child() more correct/rigorous. (tabatkins著, ) https://github.com/w3c/csswg-drafts/commit/be7492ce3c5a605704d6da2172e8c65e8f14775f
[87] Re: [selectors] Child-indexed pseudo-classes and the root element (Emilio Cobos Álvarez著, ) https://lists.w3.org/Archives/Public/www-style/2017Sep/0009.html
[88] Re: [selectors] Child-indexed pseudo-classes and the root element (Tab Atkins Jr.著, ) https://lists.w3.org/Archives/Public/www-style/2017Sep/0010.html
[89] Fix An+B explanation to be correct, and add a reminder note about the… (tabatkins著, ) https://github.com/w3c/csswg-drafts/commit/93805556ee50dae06455f03522464c1eac451fba
[90] [selectors-4] nth-child omits n=0 case · Issue #2321 · w3c/csswg-drafts () https://github.com/w3c/csswg-drafts/issues/2321
[91] [selectors-4] in :nth-child, if S is to be a no-op when omitted, it n… (fantasai著, ) https://github.com/w3c/csswg-drafts/commit/335914453ae1e405f5923c327c6ad0dd62710f54
[92] [selectors-4] Specificity Fixes: add cross-references, fix definition… (fantasai著, ) https://github.com/w3c/csswg-drafts/commit/88b91c0486c3f22f59cad547a13545712dbf785f
[93] [selectors-4] mention the specificity rules for special pseudo-classes · Issue #2129 · w3c/csswg-drafts () https://github.com/w3c/csswg-drafts/issues/2129