:first-of-type

:first-of-type

[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] 次の擬似クラスはいずれも同じ意味です。ただし詳細度は異なることがあります。

[30] これらの擬似クラスによる要素の位置の計算においては、要素節点のみを数えます。 テキスト節点などは無視します。>>1 6.6.5.

引数

[13] :nth-child, :nth-last-child, :nth-of-type, :nth-last-of-type括弧で括って要素の位置を表す文字列を指定しなければなりません。

[14] この値は、

... のいずれかでなければなりません。

an+b

[17] an+b は、この式の n0以上整数を代入して得られる数値で表される位置を表します >>1 6.6.5.2.

[18] 例えば 4n+3 は 3 番目、7 番目、11 番目、... を表します。

[26] 0 以下の数値が得られるとしても、要素の位置は1番から数え始めるので、 その値は意味がありません。どの要素とも一致しません。>>1 6.6.5.2.

[19] ab整数でなければなりません。数値は 0 ... 9数字を連ねて表します。 +-符号として数値の前に付けることができます。ただし b については直前の + のかわりに符号を使います。 >>1 6.6.5.2.

[20] 例えば +4n-2-2n-3 のように表せます。

[21] (多分自明なので) 明記されていませんが、数値は十進整数として表します。

[22] ab が 0 の時はごと省略できますが、両方を省略することはできません。 また最初の項の符号+ なら、これも省略できます。>>1 6.6.5.2.

[23] 例えば 4n (= 4n+0) や 5 (= +5 = 0n+5) のように表せます。 0n+00 と等価ですが、これ以上は省略できません。 (ただし 0 は 0 番目を表し、要素は1番から数え始めるので、何とも一致しません。)

[24] a絶対値が1なら、数値部分を省略できます。>>1 6.6.5.2.

[25] 例えば 1n+4n+4-1n+2-n+2 と表せます。

[72] Chrome-n だけの値に対応していません。 (b が続く場合には対応しています。) FirefoxOpera は対応しています。 (といっても -n に一致する要素は存在しないので、 CSSOM に現れるかどうかの違いしかありませんが。)

[74] Firefox\-n という表記を -n と同じ値とみなしますが、 Opera非妥当とみなします。

[78] 同様に 2n-\31Firefox2n-1 とみなしますが、 OperaChrome非妥当とみなします。

[76] これは FirefoxIDENT 字句として処理していることを表します。 Opera はそうでないか、あるいは escape の有無を区別して処理していることになります。

[57] どのWebブラウザー小数は使えません。

[59] nASCII大文字・小文字不区別です。

[60] nescape であっても構いません。

[63] >>60Firefox は対応していますが、 ChromeOpera は対応していません。

[68] Firefox, Chrome, Opera 共に 整数n の間に注釈は入れられません。

[71] Opera では符号n の間に注釈を入れられますが、 ChromeFirefox では入れられません。

evenodd

[15] even2n と同じです >>1 6.6.5.2.偶数番目を表します。

[16] odd2n+1 と同じです >>1 6.6.5.2.奇数番目を表します。

[66] ASCII大文字・小文字不区別です。

[65] FirefoxChromeescape に対応しています。 しかし Opera は対応していません。

[67] FirefoxOpera2n, 2n+1正規化しているようですが、 Chromeeven, odd までしか正規化しないようです。 (2n2n のままです。)

構文

[27] 引数の括弧の内側には空白を挿入できます。>>1 6.6.5.2.

[28] an+b 形式で2つのが両方現れる場合の途中の +- の前後には空白を挿入できます。>>1 6.6.5.2.

[29] どちらかのだけしか表れない場合、その符号の後には空白は挿入できません。 >>1 6.6.5.2.

[51] FirefoxOperaChrome>>28>>29 の通りに実装しています。

[52] Chrome>>28空白の箇所に注釈を入れることに対応していません。 FirefoxOpera は対応しています。

[54] Opera は1つ目の (または唯一の) の符号数字の間に注釈を認めていますが、 FirefoxChrome は認めていません。

大文字と小文字

[12] 擬似クラスの種類を表す部分も引数もASCII大文字・小文字不区別です。

歴史

// ... /, / ... //, // ... //

[35] STTS2CSS2 の初期案では DL ~ //DT/ (//.../ = :first-child) や DL ~ /DD// (/...// = :last-child) や UL ~ //LI// (//...// = :only-child) のような構文が提案されていました。

[36] ちなみに /.../兄弟結合子の意味でした。

:first-child

[32] >>48 の次の WD である >>49 で旧構文は削除され、かわりに :first-child が追加されました。

[50] :last-child:only-child に相当する機能はなくなりました。

STTS3

[37] STTS3 では要素の位置は擬似クラスで表すようになりました。

[39] これらは XSL (現在の XPath) に由来すると説明されています。

選択子3

初期

[42] 選択子3の最初の公開案である >>41 では

... が定義されていました。

後期

[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 が追加されました。

XBL2

[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

[83] Safari 9.0 ( 版) https://developer.apple.com/library/safari/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html#//apple_ref/doc/uid/TP40014305-CH9-SW34

The following CSS4 selectors are now fully supported by Safari.

:nth-child

[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