7.txt

[2] [[擬似クラス]]である [DFN[[CODE(CSS)@en[[[:nth-child()]]]]]], [DFN[[CODE(CSS)@en[[[:nth-last-child()]]]]]],
[DFN[[CODE(CSS)@en[[[:nth-of-type()]]]]]], [DFN[[CODE(CSS)@en[[[:nth-last-of-type()]]]]]],
[DFN[[CODE(CSS)@en[[[:first-child]]]]]], [DFN[[CODE(CSS)@en[[[:last-child]]]]]],
[DFN[[CODE(CSS)@en[[[:only-child]]]]]], [DFN[[CODE(CSS)@en[[[:only-of-type]]]]]]
は、[[親要素]]中の[[要素]]の位置によって[[一致]]するものです。

* 仕様書

[REFS[
- [1] [CITE@en[Selectors Level 3]] ([TIME[2011-09-29 22:16:17 +09:00]] 版) <http://www.w3.org/TR/selectors/#structural-pseudos>
]REFS]

* 意味

[3] [CODE(CSS)@en[[[:nth-child()]]]] は、最初の[[子要素]]を1番目として数えた時、
引数で指定された位置にある[[要素]]を表します [SRC[>>1 6.6.5.2.]]。
[CODE(CSS)@en[[[:nth-of-type()]]]] は更に[[要素名]]が同じ[[展開名]]であるものだけ数える、
との条件を加えたものです [SRC[>>1 6.6.5.4.]]。

[4] [CODE(CSS)@en[[[:nth-last-child()]]]] は、最後の[[子要素]]を1番目として数えた時、
引数で指定された位置にある[[要素]]を表します [SRC[>>1 6.6.5.3.]]。
[CODE(CSS)@en[[[:nth-last-of-type()]]]] は更に[[要素名]]が同じ[[展開名]]であるものだけ数える、
との条件を加えたものです [SRC[>>1 6.6.5.5.]]。

[5] 次の[[擬似クラス]]はいずれも同じ意味です。ただし[[詳細度]]は異なることがあります。
- [6] [CODE(CSS)@en[[[:first-child]]]] と [CODE(CSS)@en[[[:nth-child]](1)]] [SRC[>>1 6.6.5.6.]]
- [7] [CODE(CSS)@en[[[:first-of-type]]]] と [CODE(CSS)@en[[[:nth-of-type]](1)]] [SRC[>>1 6.6.5.8.]]
- [8] [CODE(CSS)@en[[[:last-child]]]] と [CODE(CSS)@en[[[:nth-last-child]](1)]] [SRC[>>1 6.6.5.7.]]
- [9] [CODE(CSS)@en[[[:last-of-type]]]] と [CODE(CSS)@en[[[:nth-last-of-type]](1)]] [SRC[>>1 6.6.5.9.]]
- [10] [CODE(CSS)@en[[[:only-child]]]] と [CODE(CSS)@en[[[:first-child]][[:last-child]]]] [SRC[>>1 6.6.5.10.]]
- [11] [CODE(CSS)@en[[[:only-of-type]]]] と [CODE(CSS)@en[[[:first-of-type]][[:last-of-type]]]] [SRC[>>1 6.6.5.11.]]

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

* 引数

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

[14] この値は、
- [CODE(CSS)[[VAR[a]]n+[VAR[b]]]]
- [CODE(CSS)@en[[[even]]]]
- [CODE(CSS)@en[[[odd]]]]

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

** [CODE(CSS)@en[[VAR[a]]n+[VAR[b]]]]

@@ [80] 新しい定義 → [CITE@en[CSS Syntax Module Level 3]] ([TIME[2013-07-26 07:52:42 +09:00]] 版) <http://dev.w3.org/csswg/css-syntax/#anb>

[17] [DFN[[CODE(CSS)@en[[VAR[a]]n+[VAR[b]]]]]] は、この式の [VAR[n]] に[[0]][[以上]]の[[整数]]を代入して得られる数値で表される位置を表します
[SRC[>>1 6.6.5.2.]]。

[EG[
[18] 例えば [CODE(CSS)@en[4n+3]] は 3 番目、7 番目、11 番目、... を表します。
]EG]

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

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

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

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

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

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

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

[EG[
[25] 例えば [CODE(CSS)@en[1n+4]] は [CODE(CSS)[n+4]]、 [CODE(CSS)@en[-1n+2]] は 
[CODE(CSS)[-n+2]] と表せます。
]EG]

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

[REFS[
- [73] <http://suika.fam.cx/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>
]REFS]

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

[78] 同様に [CODE(CSS)[2n-\31]] を [[Firefox]] は [CODE(CSS)[2n-1]] とみなしますが、
[[Opera]] と [[Chrome]] は[[非妥当]]とみなします。 [TIME[2011-11-01T15:09:43.00Z]]

;; [76] これは [[Firefox]] が [CODE(CSS)@en[[[IDENT]]]] [[字句]]として処理していることを表します。
[[Opera]] はそうでないか、あるいは [[escape]] の有無を区別して処理していることになります。

[REFS[
- [75] <http://suika.fam.cx/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] <http://suika.fam.cx/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>
]REFS]

[57] どの[[Webブラウザー]]も[[小数]]は使えません。 [TIME[2011-10-30T10:19:08.0Z]]

[REFS[
- [58] <http://suika.fam.cx/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>
]REFS]

[59] [CODE(CSS)@en[[[n]]]] は[[ASCII大文字・小文字不区別]]です。

[60] [CODE(CSS)@en[[[n]]]] は [[escape]] であっても構いません。

[63] >>60 は [[Firefox]] は対応していますが、 [[Chrome]] と [[Opera]] は対応していません。 [TIME[2011-10-30T10:32:46.100Z]]

[REFS[
- [62] <http://suika.fam.cx/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] <http://suika.fam.cx/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>
]REFS]

[68] [[Firefox]], [[Chrome]], [[Opera]] 共に
[[整数]]と [CODE(CSS)@en[[[n]]]] の間に[[注釈]]は入れられません。 [TIME[2011-10-30T10:59:04.800Z]]

[REFS[
- [69] <http://suika.fam.cx/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>
]REFS]

[71] [[Opera]] では[[符号]]と [CODE(CSS)@en[[[n]]]] の間に[[注釈]]を入れられますが、
[[Chrome]] と [[Firefox]] では入れられません。 [TIME[2011-10-30T11:00:17.500Z]]

[REFS[
- [70] <http://suika.fam.cx/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>
]REFS]

** [CODE(CSS)@en[even]] と [CODE(CSS)@en[odd]]

[15] [DFN[[CODE(CSS)@en[[[even]]]]]] は [CODE(CSS)@en[[[2n]]]] と同じです [SRC[>>1 6.6.5.2.]]。
[[偶数]]番目を表します。

[16] [DFN[[CODE(CSS)@en[[[odd]]]]]] は [CODE(CSS)@en[[[2n+1]]]] と同じです [SRC[>>1 6.6.5.2.]]。
[[奇数]]番目を表します。

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

[65] [[Firefox]] と [[Chrome]] は [[escape]] に対応しています。
しかし [[Opera]] は対応していません。 [TIME[2011-10-30T10:34:22.800Z]]

[REFS[
- [64] <http://suika.fam.cx/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>
]REFS]

[67] [[Firefox]] と [[Opera]] は [CODE(CSS)@en[2n]], [CODE(CSS)@en[2n+1]]
に[[正規化]]しているようですが、 [[Chrome]] は [CODE(CSS)@en[[[even]]]], [CODE(CSS)@en[[[odd]]]]
までしか[[正規化]]しないようです。 ([CODE(CSS)@en[2n]] は [CODE(CSS)@en[2n]] のままです。)
[TIME[2011-10-30T10:35:55.700Z]]

* 構文

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

[28] [CODE(CSS)[[VAR[a]]n+[VAR[b]]]] 形式で2つの[[項]]が両方現れる場合の途中の
[CODE(CSS)[[[+]]]] や [CODE(CSS)[[[-]]]] の前後には[[空白]]を挿入できます。[SRC[>>1 6.6.5.2.]]

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

[51] [[Firefox]] と [[Opera]]、 [[Chrome]] は >>28、>>29 の通りに実装しています。 [TIME[2011-10-30T10:14:28.000Z]]

[52] [[Chrome]] は >>28 の[[空白]]の箇所に[[注釈]]を入れることに対応していません。
[[Firefox]] と [[Opera]] は対応しています。 [TIME[2011-10-30T10:14:49.700Z]]

[REFS[
- [53] <http://suika.fam.cx/gate/2007/cssom/viewer?c=%3Anth-child(2n%20%2F**%2F%2B%2F**%2F%201)%20%7B%20color%20%3A%20green%20%7D;h=%3Cp%3EThis%20paragraph%20must%20be%20green.;p=n;x=style-element;i=html-div>
]REFS]

[54] [[Opera]] は1つ目の[[項]] (または唯一の[[項]]) の[[符号]]と[[数字]]の間に[[注釈]]を認めていますが、
[[Firefox]] と [[Chrome]] は認めていません。 [TIME[2011-10-30T10:16:23.300Z]]

[REFS[
- [55] <http://suika.fam.cx/gate/2007/cssom/viewer?c=%3Anth-child(%2B%2F**%2F2n%20)%20%7B%20color%20%3A%20green%20%7D;h=%3Cp%3EThis%20paragraph%20must%20be%20green.;p=n;x=style-element;i=html-div>
- [56] <http://suika.fam.cx/gate/2007/cssom/viewer?c=%3Anth-child(-%2F**%2Fn)%20%7B%20color%20%3A%20green%20%7D;h=%3Cp%3EThis%20paragraph%20must%20be%20green.;p=n;x=style-element;i=html-div>
]REFS]

* 大文字と小文字

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

* 歴史

** [CODE(CSS)[// ... /]], [CODE(CSS)[/ ... //]], [CODE(CSS)[// ... //]]

[REFS[
- [34] [CITE[STSS 2]] ([[Daniel Glazman]] 著, [TIME[2000-09-09 01:13:50 +09:00]] 版) <http://www.w3.org/TR/NOTE-stts2-971017#Sequential>
- [48] [CITE@en[Selectors]] ([TIME[1997-11-08 03:00:17 +09:00]] 版) <http://www.w3.org/TR/WD-CSS2-971104/selector.html#sequential-selectors>
]REFS]

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

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

** [CODE(CSS)@en[:first-child]]

[REFS[
- [49] [CITE@en[Selectors]] ([TIME[2001-01-16 00:22:58 +09:00]] 版) <http://www.w3.org/TR/1998/WD-css2-19980128/selector.html#first-child>
- [31] [CITE@en[Selectors]] ([TIME[2011-06-07 22:09:52 +09:00]] 版) <http://www.w3.org/TR/CSS2/selector.html#first-child>
]REFS]

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

;; [50] [CODE(CSS)@en[[[:last-child]]]] や [CODE(CSS)@en[[[:only-child]]]]
に相当する機能はなくなりました。

** STTS3

[REFS[
- [38] [CITE[STSS 3]] ([TIME[2000-03-13 23:38:54 +09:00]] 版) <http://www.w3.org/TR/1998/NOTE-STTS3-19981111#Classes>
]REFS]

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

- [CODE(CSS)@en[[[:first-of-type]]]]
- [CODE(CSS)@en[[[:not-first-of-type]]]]
- [CODE(CSS)@en[[[:last-of-type]]]]
- [CODE(CSS)@en[[[:not-last-of-type]]]]
- [CODE(CSS)@en[[[:first-of-any]]]]
- [CODE(CSS)@en[[[:not-first-of-any]]]]
- [CODE(CSS)@en[[[:last-of-any]]]]
- [CODE(CSS)@en[[[:not-last-of-any]]]]
- [CODE(CSS)@en[[[:only-of-type]]]]
- [CODE(CSS)@en[[[:not-only-of-type]]]]
- [CODE(CSS)@en[[[:only-of-any]]]]
- [CODE(CSS)@en[[[:not-only-of-any]]]]

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

[REFS[
- [40] [CITE[Extensible Stylesheet Language (XSL)]] ([TIME[1998-08-18 21:38:31 +09:00]] 版) <http://www.w3.org/TR/1998/WD-xsl-19980818#AEN646>
]REFS]

** 選択子3

*** 初期

[REFS[
- [41] [CITE[CSS3 module: W3C selectors]] ([TIME[2000-03-13 23:37:32 +09:00]] 版) <http://www.w3.org/TR/1999/WD-CSS3-selectors-19990803#structural-pseudos>
]REFS]

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

- [CODE(CSS)@en[[[:first-child]]]]
- [CODE(CSS)@en[[[:not-first-child]]]]
- [CODE(CSS)@en[[[:last-child]]]]
- [CODE(CSS)@en[[[:not-last-child]]]]
- [CODE(CSS)@en[[[:first-of-type]]]]
- [CODE(CSS)@en[[[:not-first-of-type]]]]
- [CODE(CSS)@en[[[:last-of-type]]]]
- [CODE(CSS)@en[[[:not-last-of-type]]]]
- [CODE(CSS)@en[[[:only-of-type]]]]
- [CODE(CSS)@en[[[:not-only-of-type]]]]
- [CODE(CSS)@en[[[:only-child]]]]
- [CODE(CSS)@en[[[:not-only-child]]]]
- [CODE(CSS)@en[[[:nth-of-type]]]]
- [CODE(CSS)@en[[[:not-nth-of-type]]]]
- [CODE(CSS)@en[[[:nth-child]]]]
- [CODE(CSS)@en[[[:not-nth-child]]]]

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

*** 後期

[REFS[
- [43] [CITE@en[CSS3 module: W3C Selectors]] ([TIME[2001-01-29 23:57:00 +09:00]] 版) <http://www.w3.org/TR/2001/WD-css3-selectors-20010126/#structural-pseudos>
]REFS]

[44] >>43 で [CODE(CSS)@en[[[:not()]]]] が追加されたことにより、否定形はすべて削除されました。

[45] >>43 では [CODE(CSS)@en[[[:nth-last-child()]]]] と [CODE(CSS)@en[[[:nth-last-of-type()]]]]
が追加されています。

*** メモ

[33] 結局最終的に[[選択子3]]では [CODE(CSS)@en[[[:last-child]]]], [CODE(CSS)@en[[[:first-of-type]]]],
[CODE(CSS)@en[[[:last-of-type]]]], [CODE(CSS)@en[[[:nth-child]]]],
[CODE(CSS)@en[[[:nth-of-type]]]], [CODE(CSS)@en[[[:nth-last-child]]]],
[CODE(CSS)@en[[[:nth-last-of-type]]]], [CODE(CSS)@en[[[:only-child]]]],
[CODE(CSS)@en[[[:only-of-type]]]] が追加されました。

** XBL2

[REFS[
- [46] [CITE@en-US[XBL 2.0]] ([TIME[2010-09-03 10:10:02 +09:00]] 版) <http://dev.w3.org/2006/xbl2/Overview.html#selectors-and-shadow-scopes>
]REFS]

[47] [[XBL2]] は[[影木]]の影響を受けないと規定していました。


[79] [CITE@en[Re: ''''''[''''''css-syntax'''''']'''''' <an+b> grammar]]
( ([[Tab Atkins Jr.]] 著, [TIME[2013-05-14 02:49:31 +09:00]] 版))
<http://lists.w3.org/Archives/Public/www-style/2013May/0308.html>

[81] [CITE[IRC logs: freenode / #whatwg / 20131029]]
( ([TIME[2013-10-30 20:25:08 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20131029#l-699>

[82] [CITE@en[Errata in REC-css3-selectors-20110929]]
( ([TIME[2013-07-23 21:48:46 +09:00]] 版))
<http://www.w3.org/Style/2011/REC-css3-selectors-20110929-errata.html>

[FIG(quote)[
[FIGCAPTION[
[83] [CITE@en[Safari 9.0]]
([TIME[2015-11-04 23:35:51 +09:00]] 版)
<https://developer.apple.com/library/safari/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html#//apple_ref/doc/uid/TP40014305-CH9-SW34>
]FIGCAPTION]

> The following CSS4 selectors are now fully supported by Safari.
> :nth-child

]FIG]


[84] [CITE@en[Acid3 and :first-child]]
([[Ms2ger]]著, [TIME[2016-10-20 00:47:11 +09:00]])
<https://lists.w3.org/Archives/Public/www-archive/2016Oct/0005.html>

[85] [CITE@en[Re: Acid3 and :first-child]]
([[Anne van Kesteren]]著, [TIME[2017-01-19 01:05:29 +09:00]])
<https://lists.w3.org/Archives/Public/www-archive/2017Jan/0014.html>

[86] [CITE@en['''['''selectors''']''' Make the definition of :nth-child() more correct/rigorous.]]
([[tabatkins]]著, [TIME[2017-04-29 05:11:35 +09:00]])
<https://github.com/w3c/csswg-drafts/commit/be7492ce3c5a605704d6da2172e8c65e8f14775f>