/
7.txt
334 lines (238 loc) · 16.4 KB
/
7.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
[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>