[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

[80] 新しい定義 → CSS Syntax Module Level 3 ( 版) http://dev.w3.org/csswg/css-syntax/#anb

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

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

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

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

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

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

[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.

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

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

  • [73] https://suika.suikawiki.org/gate/2007/cssom/viewer?c=%3Anth-child(-n)%20%7B%20color%20%3A%20blue%20%7D;h=;p=n;x=style-element;i=html-div

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

[78] 同様に 2n-\31 を Firefox は 2n-1 とみなしますが、 Opera と Chrome は非妥当とみなします。

[76] これは Firefox が IDENT 字句として処理していることを表します。 Opera はそうでないか、あるいは escape の有無を区別して処理していることになります。
  • [75] https://suika.suikawiki.org/gate/2007/cssom/viewer?c=%3Anth-child(%5C-n%2B1)%20%7B%20color%20%3A%20blue%20%7D;h=%3Cp%3EIs%20this%20paragraph%20blue%3F;p=n;x=style-element;i=html-div
  • [77] https://suika.suikawiki.org/gate/2007/cssom/viewer?c=%3Anth-child(2n-%5C31)%20%7B%20color%20%3A%20blue%20%7D;h=%3Cp%3EWhat%20color%20this%20paragraph%20is%3F;p=n;x=style-element;i=html-div

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

  • [58] https://suika.suikawiki.org/gate/2007/cssom/viewer?c=%3Anth-child(1.0n)%20%7B%20color%20%3A%20red%20%7D;h=%3Cp%3EThis%20paragraph%20must%20not%20be%20red.;p=n;x=style-element;i=html-div

[59] n はASCII大文字・小文字不区別です。

[60] n は escape であっても構いません。

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

  • [62] https://suika.suikawiki.org/gate/2007/cssom/viewer?c=%3Anth-child(2%5Cn%2B1)%20%7B%20color%20%3A%20green%20%7D;h=%3Cp%3EThis%20paragraph%20must%20be%20green.;p=n;x=style-element;i=html-div
  • [61] https://suika.suikawiki.org/gate/2007/cssom/viewer?c=%3Anth-child(2%5C6e%2B1)%20%7B%20color%20%3A%20green%20%7D;h=%3Cp%3EThis%20paragraph%20must%20be%20green.;p=n;x=style-element;i=html-div

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

  • [69] https://suika.suikawiki.org/gate/2007/cssom/viewer?c=%3Anth-child(4%2F**%2Fn%2B1)%20%7B%20color%20%3A%20red%20%7D;h=%3Cp%3EThis%20paragraph%20must%20not%20be%20red.;p=n;x=style-element;i=html-div

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

  • [70] https://suika.suikawiki.org/gate/2007/cssom/viewer?c=%3Anth-child(-%2F**%2Fn%2B1)%20%7B%20color%20%3A%20green%20%7D;h=%3Cp%3EThis%20paragraph%20must%20be%20green.;p=n;x=style-element;i=html-div

even と odd

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

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

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

[65] Firefox と Chrome は escape に対応しています。 しかし Opera は対応していません。

  • [64] https://suika.suikawiki.org/gate/2007/cssom/viewer?c=%3Anth-child(eVe%5Cn)%20%7B%20color%20%3A%20green%20%7D%0D%0A;h=%3Cp%3EThis%20paragraph%20must%20be%20green.;p=n;x=style-element;i=html-div

[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.

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

[51] Firefox と Opera、 Chrome は >>28、>>29 の通りに実装しています。

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

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

大文字と小文字

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

歴史

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

  • [34] STSS 2 (Daniel Glazman 著, 版) http://www.w3.org/TR/NOTE-stts2-971017#Sequential
  • [48] Selectors ( 版) http://www.w3.org/TR/WD-CSS2-971104/selector.html#sequential-selectors

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

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

:first-child

  • [49] Selectors ( 版) http://www.w3.org/TR/1998/WD-css2-19980128/selector.html#first-child
  • [31] Selectors ( 版) http://www.w3.org/TR/CSS2/selector.html#first-child

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

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

STTS3

  • [38] STSS 3 ( 版) http://www.w3.org/TR/1998/NOTE-STTS3-19981111#Classes

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

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

  • [40] Extensible Stylesheet Language (XSL) ( 版) http://www.w3.org/TR/1998/WD-xsl-19980818#AEN646

選択子3

初期

  • [41] CSS3 module: W3C selectors ( 版) http://www.w3.org/TR/1999/WD-CSS3-selectors-19990803#structural-pseudos

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

  • :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

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

後期

  • [43] CSS3 module: W3C Selectors ( 版) http://www.w3.org/TR/2001/WD-css3-selectors-20010126/#structural-pseudos

[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

  • [46] XBL 2.0 ( 版) http://dev.w3.org/2006/xbl2/Overview.html#selectors-and-shadow-scopes

[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