/
509.txt
701 lines (503 loc) · 32.4 KB
/
509.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
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
[1] [[HTML]]、[[SVG]]、[[MathML]] などの
[DFN[[CODE(XMLa)@en[[[class]]]] [[属性]]]]は、
[[要素]]に[DFN[[RUBYB[クラス]@en[class]]]]を零個以上割り当てるものです。
[2]
:[[要素]]:[[HTML]]、[[SVG]]、[[MathML]] などの[[要素]] (>>13)
:[[名前空間URL]]:(なし)
:[[属性名]]:[CODE(HTMLa)@en[[[class]]]]
(「[RUBY[級][クラス]@en[class]]」より)
:[[属性値]]:[[クラス名]]の[[間隔]]区切りの[[並び]]
:[[既定値]]:(なし)
* 仕様書
- [135] [CITE[MathML Fundamentals]] ([TIME[2010-10-21 05:51:46 +09:00]] 版) <http://www.w3.org/TR/2010/REC-MathML3-20101021/chapter2.html#fund.globatt>
* 意味
[136] [[MathML]] では、「[[XSLT]] や [[CSS]] と共に使う[RUBYB[スタイル・クラス]@en[style class]]の集合を[[要素]]に関連付ける」
[SRC[>>135]] という意味不明な説明がなされています。
* 属性値
** データ型
[9]
この[[属性]]の[[属性値]]は、 [[HTML 4]] 仕様書本文では
[Q@en[cdata-list]] とされており、
[DFN[[RUBYB[クラス名] @en[class name]]]]を[[空白]]で区切って複数個指定できるとされています。
また、 [[HTML 4]] の [[SGML]] [[DTD]] では
[CODE(SGML)@en[[[CDATA]]]] として定義されています。
[6] [[ISO-HTML]] の注釈に [CODE(HTMLa)[class]] は comma separated
とか書いてあるけど、あれは一体なんなのだろう。。。
[137] [[MathML]] は、「典型的には[RUBYB[語]@en[word]]を[[間隔]]で区切った列であるが、
[[MathML]] では規定しない」と曖昧なことしか述べていません。
構文は [CODE@en[[[string]]]] であるとだけ規定されています。 [SRC[>>135]]
** 既定値
[10] この属性は省略可能です。省略時は級なしになります。
*** 大文字と小文字
[14]
[[HTML]] では大文字・小文字を区別せず、 [[XHTML]]
では区別するようです。 ([[Gecko]], [[WinIE 6]])
([[名無しさん]] [sage] [WEAK[2005-06-23 00:33:22 +00:00]])
[18]
>>14 は[[互換モード]]の動作で、[[標準モード]]では区別するようです。
[[#comment]]
*** 名前空間接頭辞の導入
[7]
''Embedding metadata in XHTML and extracting them as RDF'' <http://www.kanzaki.com/docs/sw/xh2rdf.html>
[[RFC 2731]] のように [CODE(HTMLa)[class]] 属性にも [CODE[.]] をコロン代わりにした[[修飾名]]を使ってメタ・データを記述してしまおうという案。
([[名無しさん]] [WEAK[2004-03-16 01:05:26 +00:00]])
[[#comment]]
** 意味
[19] '''属性値の意味''':
[CODE(HTMLa)@en[[[class]]]] [[属性]]には (任意個の)
[DFN[[RUBYB[クラス名] @en[class name]]]]を指定できます。
[[要素]] [CODE(math)@en[[VAR@en[E]]]] にクラス名 [CODE(math)@en[[VAR[N]]]]
を指定することは、その[[要素]] [CODE[[VAR@en[E]]]] が[[クラス]]
[CODE(math)@en[[VAR(function)[C]] ([VAR[N]])]]
に含まれることを表します。 [SRC@en[HTML 4 14.2.3]]
[31] '''複数のクラス名の順序''':
複数のクラス名を指定した場合、その順序が意味を持つのかどうかは、
[[HTML 4]] では[DEL[規定されていません]]。 >>19
のような規定のされ方ですから、 [CODE(HTMLa)@en[[[class]]]]
属性値におけるクラス名の順序には意味がないと考えるべきでしょう。
というか [Q@en[set]] ([[集合]])
と書いてありますから順序は意味を持ちませんね。
[[#comment]]
*** クラス名の適用範囲
[20]
クラス名が有効である範囲 (ある[[要素]]のクラス名 [CODE(math)@en[[VAR[N]]]]
と別の[[要素]]のクラス名 [CODE(math)@en[[VAR[N]]]] が共にクラス
[CODE(math)@en[[VAR(function)[C]] ([VAR[N]])]] を指すと考えられる範囲)
は明確ではありません。
[21]
[[HTML 4]] の仕様書を自然に解釈すれば、
1つの[[文書]]全体はその[Q[[[名前空間]]]]の範囲に収まっていると考えられます。
[WEAK[(そうでなく[[文書]]の一部だけなら、特に規定があるはずです。)]]
[22]
しかし、[[外部スタイル・シート]]でクラス名を[[選択子]]に使い、
その[[スタイル・シート]]を複数の[[文書]]から参照するようなことは極々普通に行われています。
その場合、[[外部スタイル・シート]]で[[選択子]]として使われているクラス名
[CODE(math)@en[[VAR[N]]]] によって表されるクラス
[CODE(math)@en[[VAR(function)[C]] ([VAR[N]])]]
はその[[スタイル・シート]]を参照するどの[[文書]]でも同じものと暗黙に仮定されているといえます。
[23]
とはいえ、クラス名が[[文書]]よりも大きな適用範囲を持つという規定はありませんし、
[[文書]]よりも大きな範囲で共通のクラス名集合を使おうとしてもそれを[[形式的]]に記述するための確立された方法もありません。
[24]
>>23 に対する提案の1つが >>7 のような
[[XML名前空間]]型大域的識別子の採用です。この方法ではクラス名は [[URI]]
によって識別されるます。 >>20 に関して
[[XML名前空間]]の[[属性名]]と同じ解決策を採ったといえます。
[25]
別の方法の1つが、共通のクラス名集合を規定して、
何らかの方法でそれに従うことを表明するというものです。
[[マイクロ書式]]のうち [[hCalendar]] や [[hCard]]
のようなものがここでいう共通なクラス名集合です。
この手法に於いては[[形式的]]な記述として [CODE(HTMLa)@en[[[profile]]]]
[[属性]]や [[XMDP]] などの技術がありますが、
その組合せ方など未解決の問題もあります。
[26]
ここで取り上げたクラス名の適用範囲の問題は、
>>27- で扱う、クラスに意味を与える場合において特に重要になります。
[[#comment]]
*** 要素型とクラス
[28]
[[要素型]]と[[クラス]]の関係について [[HTML 4]]
では特に規定がありません。特に規定がないということは、
特に制約がない、両者は直交しているということなのでしょう。
[29]
現実には、[[クラス]]は[[要素型]]を更に細分したものだという解釈もあります。
同じ[[クラス名]]を異なる[[要素型]]には使用しないという条件を満たす限りにおいては、
>>28 の解釈とこの解釈は矛盾しません。
[30]
例えば題名が含まれる [CODE(HTMLe)@en[[[cite]]]] [[要素]]には
[SAMP@en[title]] というクラス名を指定し、著者名が含まれる
[CODE(HTMLe)@en[[[cite]]]] [[要素]]には [SAMP@en[author]]
というクラス名を指定する、というのは >>29 の考えによりフィットします。
[31]
実際のところは[[クラス]]とは何かが明確ではないというか割りと何にでも使えるので、
>>28 と >>29 のどちらの解釈を採っても特に問題になることはないでしょう。
[[#comment]]
*** クラスと意味
[27]
[[HTML 4]] 仕様書の範囲では規定は >>9 の程度であり、
[[要素]]を[[クラス]]に分けられることはわかりますが、
ではその[[クラス]]にどういう意味があるのかは分かりません。
([[HTML]] のレベルでは記述できません。)
[32]
>>27 をもって [CODE(HTMLa)@en[class]]
属性を使って[[要素]]の意味を規定することはできないと主張する人がいます。
まことにもっともな主張ですが、
真に意味がないのであればわざわざ[[クラス]]分けする必要も価値もありません。
[[HTML]] として[[クラス]]が持つ (べき)
意味 (やその存在) が記述できないのだと考えておくのが良いでしょう。
メモ: [CODE(HTMLa)@en[class]] で意味を記述できないという主張は
[CODE(HTMLe)@en[[[div]]]] や [CODE(HTMLe)@en[[[span]]]]
を濫用して[Q[意味]]を記述しようとすることへの戒めでもあり、
必ずしも間違ってはいません。
[33]
[[クラス]]の意味を (情報処理可能な程度に) 規定しようとする試みとして、
[[マイクロ書式]]群があります。 [[hCalendar]] や [[hCard]]
などではクラス名群とそのクラス名が割当てられた要素が示すものは何であるかを規定しています。
例えば [[hCard]] を採用した[[文書]]では、
[[hCard]] の規定するクラスの意味に従って[[住所録]]に登録するなどの処理を行えます。
[34]
[[HTML 5]] では規定を明確にし、 [CODE(HTMLa)@en[[[profile]]]]
[[属性]]で指定された [[HTMLメタ情報プロファイル]]で規定されたクラスはそこで規定された意味を持ち、
それ以外のクラス名は単なる文字列に過ぎないと定義しています。
<http://www.whatwg.org/specs/web-apps/current-work/#class> ([[作業中]])
[35]
一方 [[XHTML 2.0]] は [CODE(XMLa)@en[[[class]]]]
[[属性]]は放置したまま新たに [CODE(XMLa)@en[[[role]]]]
[[属性]]を導入しています。 [CODE(XMLa)@en[[[role]]]]
[[属性]]で指定される[[役割]]は [[QName]] で (>>24 の方法)、
[[役割]]の意味の記述には [[RDF]] を使うことになっています。
<http://www.w3.org/TR/2005/WD-xhtml2-20050527/mod-role.html#adef_role_role>
([[作業中]])
[40]
[CITE[Use or abuse of class? at microformatique - a blog about microformats and “data at the edges”]] <http://microformatique.com/?p=9>
([[名無しさん]] [WEAK[2006-08-27 01:03:32 +00:00]])
[42]
[CITE@ja-JP[class は要素の分類 - Weblog]] ([CODE[2007-01-27 07:00:00 +09:00]] 版) <http://ryus.s21.xrea.com/w/item/841>
([[名無しさん]] [WEAK[2007-01-28 04:12:46 +00:00]])
[52]
[CITE@en[class名に「表示に関する指示を組み込む」ことについて | Tech de Go]] ([CODE[2007-04-03 08:37:13 +09:00]] 版) <http://www.techdego.com/2007/03/classname.php>
([[名無しさん]] [WEAK[2007-04-02 23:41:26 +00:00]])
[108]
[CITE@ja[HTMLのためのidとclass - 行動記録]] ([[IWAI, Masaharu]] 著, [CODE[2007-07-26 03:35:14 +09:00]] 版) <http://iwaim.beering.be/2006/12/id_and_class_for_html.html>
([[名無しさん]] [WEAK[2007-07-28 04:17:45 +00:00]])
[149] [[CSS]] は[[クラス選択子]]を導入して[[class属性]]に大きな力を与えているため、
これを使って[[著者]]が独自の「[[言語]]」を作ることも可能ではあります。
しかしながら、通常の[[マーク付け言語]]の[[要素]]が共通の意味の理解を可能にするのに対し、
[[著者]]が独自に割り振った[[クラス名]]は意味の理解性に欠けるものであり、
避けることが好ましいとされています。 [SRC[>>142]]
** 応用
[3] 仕様書 <IW:HTML4:"struct/global.html#id-and-class">
で用途例として挙げられているのは、
- [[スタイル・シート]]の[[選択子]]
- [[UA]] による一般目的処理
です。
[4]
スタイルシート, 特に [[CSS]] と [CODE(HTMLa)[class]]
属性の結びつきは強く、特に級選択子が用意されているほどです。
歴史的には [CODE(HTMLa)[class]] 属性は CSS
で使うために定義されたといっても過言ではありません。
とはいえ、現在の [CODE(HTMLa)[class]] 属性の用途はあくまで要素の分類付けであって、
スタイルシートでの使用は一用途に過ぎません。
[[表現と構造の分離]]の原則に則り、
極度に表現に偏った [CODE(HTMLa)[class]]
属性の使用法は避けるべきです。
* 歴史
** HTML4
- [8] [[HTML 4]]
-- [CODE(HTMLa)@en[class]] [[属性]]
<IW:HTML4:"struct/global.html#adef-class">
-- [CSECTION@en[14.2.3 Header style information: the [CODE(HTMLe)[STYLE]] element]]
<IW:HTML4:"present/styles.html#style-group">
* 実装
[5] [CODE(HTMLa)[class]] 属性は複数の級名を間隔で分離して列挙できますが、
古い [[UA]] (ブラウザや[[著述工具]]など)
はこれに対応していないものもあります。 [[DOM]] の [CODE(DOMa)[[[className]]]]
を無加工で使っているスクリプトの類なんかも危ない。
[12]
[[WinIE]] は >>5 の通り対応していません。
間隔が入っているとそれも含めて class 名とみなされる(?)ようです。
[[#comment]]
** 不思議解釈
[36]
[CITE[HTML辞典 (バージョン1.1.0)]]
([[野田工房(mixim)]] 著、2005年3月15日付け)
によると、 [CODE(HTMLa)@en[[[class]]]] [[属性]]は
> スタイルシートを間接指定
するものだそうです(謎)。[Q[間接指定]]とは何かと思いつつ
[CODE(HTMLa)@en[[[style]]]] [[属性]]の解説を見ると、
こちらは[Q[直接指定]]なのだそーな。
[[#comment]]
** 例
[11] 級によって CSS で表現方法を変える例
[PRE(HTML)[
<HEAD>
<TITLE>Style sheet and class</TITLE>
<STYLE type="text/css">
H1.myclass {border-width: 1px; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="myclass"> This H1 is affected by our style </H1>
<H1> This one is not affected by our style </H1>
</BODY>
]PRE]
[WEAK[(HTML 4 仕様書より、改)]]
CSS の[DFN[級選択子]]を使うと、 [CODE(HTMLa)[class]]
分けを具体的に表現に反映させることができます。
[[#comment]]
** メモ
[15]
- [CITE[Elementary, ... class="red large"のように、2つ以上の適用クラスを並べられる]]
<http://e8y.net/blog/index.php/2005/07/24/p124>
- [CITE[ CSSで2つ以上のクラス指定ができる]]
<http://knoa.jp/memo/?id=2005-07-25+21:03>
''HTML で'' [SAMP(HTML)@en[[CODE(HTMLa)[class]]="class1 class2"]]
のように複数指定できるという話 (>>16) と、 ''CSS で''
[SAMP(CSS)@en[.class1.class2 { [VAR[...]] }]] のように
複数指定できるという話 (>>17) は区別して議論しないと駄目ですよ。。。
[16]
HTML の [CODE(HTMLa)@en[class]] 属性への
[SAMP(HTML)@en[[CODE(HTMLa)[class]]="class1 class2"]]
のような値の複数指定に [[WinIE]]
が対応したのは 5.0 から。
[CITE@en[CLASS Attribute | className Property (A, ACRONYM, ADDRESS, ...) (Internet Explorer)]]
<http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/classname.asp>
(仕様としては [CODE(HTMLa)@en[class]] 属性が正式に導入された
[[HTML 4.0]] から。 [[CSS]] が 1 か 2 かは関係ありません。)
> 値は左から順にカスケードして適用されていく
<http://e8y.net/blog/index.php/2005/07/24/p124>
これは間違っています。 HTML の [CODE(HTMLa)@en[class]]
属性における順序は CSS においては意味がありません。
CSS における[[規則]]の優先順位は CSS の中だけで決まります。
実際に CSS で規則を書く順序を入れ替えてみれば、
''後から書いたものが優先される''だけだと分かります。
テスト:
- <http://suika.fam.cx/gate/cvs/*checkout*/www/test/css/class/multiple-class-single-rules.html>
[17]
[[CSS]] の [SAMP(CSS)@en[.class1.class2 { [VAR[...]] }]]
のようなクラス名の複数指定に [[WinIE]] は
([[WinIE 6.0]] でも) 対応していません。
(仕様としては [[CSS 2]] から。)
テスト:
- <http://suika.fam.cx/gate/cvs/*checkout*/www/test/css/class/multiple-class-classes-selector.html>
- <http://suika.fam.cx/gate/cvs/*checkout*/www/test/css/class/multiple-class-classes-selector-2.html>
[[CSS 1]] に正しく従っていれば [[CSS 2]]
で導入された規則は無視するのが正しく、
''どちらのテストも''文字が緑色で表示されるはずです。
[[CSS 2]] に正しく従っていればクラス名の複数指定の方を採用して、
''どちらのテストも''文字が青色で表示されるはずです。
[[WinIE 6.0]] は1つ目が青、2つ目が緑です。つまり間違っています。
[43]
[CITE[WEBTECH - webtech:vantguarde]] ([CODE[2007-03-04 14:16:31 +09:00]] 版) <http://web.g.hatena.ne.jp/vantguarde/20070301#1172740363>
([[名無しさん]] [WEAK[2007-03-04 05:18:42 +00:00]])
[44]
[CITE[Default CSS2 style sheet for Web pages on a TV]] ([CODE[1998-07-23 22:08:40 +09:00]] 版) <http://www.w3.org/Style/1998/07/tvweb-style>
[61]
[CITE[Predefined classes are gone]] ([[Ian Hickson <ian@...>]] 著, [CODE[2007-05-17 04:42:27 +09:00]] 版) <http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/10659>
([[名無しさん]] [WEAK[2007-05-17 11:55:43 +00:00]])
[74]
[CITE@ja[複数のclassをセレクタに指定する方法 | Blog hamashun.com]] ([CODE[2007-05-25 12:49:09 +09:00]] 版) <http://www.hamashun.com/blog/2007/05/class_1.html>
([[名無しさん]] [WEAK[2007-05-25 07:18:25 +00:00]])
[72]
[CITE@ja[複数のclassをセレクタに指定する際のメモ書き | Blog hamashun.com]] ([CODE[2007-05-25 16:01:20 +09:00]] 版) <http://www.hamashun.com/blog/2007/05/class_2.html>
([[名無しさん]] [WEAK[2007-05-25 07:16:57 +00:00]])
[75]
[CITE@ja[複数のclassをセレクタに指定した際のIEのバグ | Blog hamashun.com]] ([CODE[2007-05-25 16:07:37 +09:00]] 版) <http://www.hamashun.com/blog/2007/05/classie_1.html>
([[名無しさん]] [WEAK[2007-05-25 07:18:49 +00:00]])
[98]
[CITE[WEBTECH - webtech:vantguarde]] ([CODE[2007-06-24 16:19:26 +09:00]] 版) <http://web.g.hatena.ne.jp/vantguarde/20070619#1182258927>
([[名無しさん]] [WEAK[2007-06-24 07:21:31 +00:00]])
[99]
[CITE@en[Unicode for CSS Class Names - Snook.ca]] ([CODE[2007-06-24 17:16:00 +09:00]] 版) <http://snook.ca/archives/html_and_css/unicode_for_css_class_names/>
([[名無しさん]] [WEAK[2007-06-24 09:45:40 +00:00]])
[109]
[CITE@en[class/id values on default Blogs templates]] ([[Karl Dubost]] 著, [CODE[2007-05-08 15:31:42 +09:00]] 版) <http://lists.w3.org/Archives/Public/public-html/2007May/0868.html>
([[名無しさん]])
[110]
[CITE@en[Re: Research for class="copyright" (was: Re: Getting beyond the ping pong match)]] ([[Lachlan Hunt]] 著, [CODE[2007-05-07 00:59:18 +09:00]] 版) <http://lists.w3.org/Archives/Public/public-html/2007May/0709.html>
([[名無しさん]])
[[#comment]]
* HTML の [CODE(HTMLa)[class]] と同じ意味の属性
[13] [ABBR[[[HTML]]] [ハイパーテキスト・マーク付け言語]]
と [WEAK[(ほぼ)]] 同じ意味と構文を持つ [WEAK[(らしい)]] 属性として、
次のものが見つかっています。
,名前空間 ,局所名 ,仕様
,([CODE(URI)@en[[[http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul]]]]) ,[CODE(XMLa)@en[[[class]]]] ,[[XBL]]
,([CODE(URI)[[[http://www.w3.org/1998/Math/MathML]]]]) ,[CODE(XMLa)[class]] ,[[MathML]]
,[CODE(URI)[[[http://www.w3.org/1999/xhtml]]]] ,[CODE(HTMLa)[class]] ,[[XHTML 1]]
,([CODE(URI)[[[http://www.w3.org/1999/xhtml]]]]) ,[CODE(HTMLa)[class]] ,[[XHTML 1]]
,([CODE(URI)[[[http://www.w3.org/2000/svg]]]]) ,[CODE(XMLa)[class]] ,[[SVG]]
,([CODE(URI)[[[http://www.w3.org/2001/SMIL20/Language]]]]) ,[CODE(XMLa)[class]] ,[[SMIL 2.0]]
,([CODE(URI)[[[http://www.w3.org/2002/06/xhtml2]]]]) ,[CODE(XMLa)[class]] ,[[XHTML 2]]
,[CODE(URI)[[[http://www.w3.org/2002/06/xhtml2]]]] ,[CODE(XMLa)[class]] ,[[XHTML 2]]
,([CODE(URI)[[[http://www.w3.org/2002/06/xhtml2/]]]]) ,[CODE(XMLa)[class]] ,[[XHTML 2]]
,[CODE(URI)[[[http://www.w3.org/2002/06/xhtml2/]]]] ,[CODE(XMLa)[class]] ,[[XHTML 2]]
,([CODE(URI)[[[urn:schemas-microsoft-com:vml]]]]) ,[CODE(XMLa)[class]] ,[[VML]]
,([CODE(URI)[[[urn:x-suika-fam-cx:markup:jis:x:4052:2000:]]]]) ,[CODE(XMLa)[class]] ,[[JIS X 4052]]:2000
,"([CODE(XMLe)@en[[QN[xbl:[[div]]] [data:,520e273a-62ad-4528-bb1e-9652bda76d62]]]])" ,[CODE(XMLa)@en[[[class]]]] ,[[XBL 2.0]]
,([CODE(XMLe)@en[[QN[xbl:[[div]]] [http://www.w3.org/ns/xbl]]]]) ,[CODE(XMLa)@en[[[class]]]] ,[[XBL 2.0]]
;;
括弧付きの名前空間は、その属性が[[大域属性]]では'''なく'''、
その名前空間の[[要素型]] [WEAK[(ほぼ)]] すべてに定義されている属性であることを表します。
これらの属性は、[[空白]]で分割すればある要素の属する[[級]]の名前の集合が得られ、
それぞれの級名は [WEAK[(例えば)]]
[ABBR[[[CSS]]] [Cascading Style Sheets]]
の[[級選択子]]に使うことができます。
;;
注意: 細かい意味や構文はそれぞれの仕様により異なることがあります。
[124]
[CITE[SVG quirks - Anne’s Weblog]] ([CODE[2007-12-04 11:55:27 +09:00]] 版) <http://annevankesteren.nl/2007/12/svg-quirks>
[172] [[OMDoc]] の多くの[[要素]]にも [CODE(XMLa)@en[[[class]]]] [[属性]]があります。
[REFS[
- [173] [[OMDoc]] ([TIME[2010-10-13 07:54:48 +09:00]] 版) <http://omdoc.org/pubs/omdoc1.2.pdf#page=107>
]REFS]
* クラス選択子
[143] [DFN[[RUBYB[[[クラス選択子]]]@en[class selector]]]]は、[[class属性]]の値が指定された値と一致することを表します。
** 仕様書
[REFS[
- [142] [CITE@en[Selectors Level 3]] ([TIME[2011-09-29 22:16:17 +09:00]] 版) <http://www.w3.org/TR/selectors/#class-html>
- [163] [CITE@en-US-x-hixie[HTML Standard]] ([TIME[2011-11-12 00:22:26 +09:00]] 版) <http://www.whatwg.org/specs/web-apps/current-work/#selectors>
- [165] [CITE@en-US-x-hixie[WebVTT Standard]] ([TIME[2011-12-06 00:38:23 +09:00]] 版) <http://dev.w3.org/html5/webvtt/#pseudo-cue-selector>
- [174] [CITE@en[Selectors Level 4]] ([TIME[2014-05-06 18:55:03 +09:00]] 版) <http://dev.w3.org/csswg/selectors/#data-model>
]REFS]
** 意味
[144] [[クラス選択子]]は[[class属性]]に対して[[属性選択子]]の [CODE(CSS)[[[~=]]]] と同じはたらきをします
[SRC[>>142]]。
[145] 適用対象となる[[class属性]]として、 [[HTML]] の [CODE(HTMLa)@en[[[class]]]] [[属性]]の他、
当該[[マーク付け言語]]で適用対象であると規定された[[属性]]が存在します。具体例としては [[SVG]]
の [CODE(XMLa)@en[[[class]]]] [[属性]]や [[MathML]] の [CODE(XMLa)@en[[[class]]]]
[[属性]]があります。 [SRC[>>142]]
;; [146] [[class属性]]の一覧は >>13 を参照してください。
[147] 一つの[[要素]]に複数の[[class属性]]が存在するなら、[[空白]]で連結した値に対して適用するものとみなす、
とされています。ただしそのようなケースは見つかっていないとして、[[規定]]の一部では無いとされています。
[SRC[>>142]]
;; [148] 理論上は [[XHTML1]] [[名前空間]]の [CODE(HTMLa)@en[[[class]]]] [[属性]]を
[[SVG]] の[[要素]]で指定したりすると起こり得ますが、現実に実装されているのかは不明です。
[166] [[WebVTT]] では[[WebVTT節点オブジェクト]]の[[適用可能なクラス]]が[[class属性]]として扱われます。
[SRC[>>165]]
** 構文
[140] [[WinIE 6]] は[[クラス名]]が[[数字]]から始まっていても受け付けます。
[[Opera]] 9 は[[奇癖モード]]でだけ受け付けます。
[[Firefox]] 2 は受け付けません。
** 大文字と小文字
[150] [[大文字]]と[[小文字]]を区別するかは[[マーク付け言語]]に依存します。
[151] [[奇癖モード]]では、[[クラス選択子]]の比較は[[ASCII大文字・小文字不区別]]です。 [SRC[>>174]]
;; [164] それ以外、すなわち [[XML文書]]の場合や[[無奇癖モード]]や[[限定奇癖モード]]の場合を明記している仕様書はありませんが、
[[大文字]]と[[小文字]]を区別するものと解されています。
;; [175] [[奇癖モード]]では、[[HTML要素]]以外の[[要素]]でも[[大文字]]と[[小文字]]は区別されません。
;; [176] 構文解析時ではなく比較時に区別されないので、 [[CSSOM]] に現れる[[クラス選択子]]は記述されたままの[[大文字]]と[[小文字]]です。
** 歴史
*** CSS1
[REFS[
- [160] [CITE[Cascading Style Sheets: a draft specification]] ([TIME[1995-05-31 21:05:57 +09:00]] 版) <http://www.w3.org/Style/CSS/draft1.html#classes>
- [153] [CITE[Cascading Style Sheets, level 1]] ([TIME[2008-04-10 02:23:32 +09:00]] 版) <http://www.w3.org/TR/CSS1/#class-as-selector>
]REFS]
[161] [[クラス選択子]]に相当するものは最初期 (>>160) からありました (当時はまだ名前はついていませんでしたが)。
*** CSS2
**** クラス選択子
[REFS[
- [152] [CITE@en[Selectors]] ([TIME[2011-06-07 22:09:52 +09:00]] 版) <http://www.w3.org/TR/CSS2/selector.html#class-html>
]REFS]
**** [CODE(CSS)@en[@class]]
[REFS[
- [156] [CITE@en[Selectors]] ([TIME[1997-11-08 03:00:17 +09:00]] 版) <http://www.w3.org/TR/WD-CSS2-971104/selector.html#h-6.3.3>
]REFS]
[157] [[CSS2]] の初期は [DFN[[CODE(CSS)@en[[[@class]]]]]] [[@規則]]により [[HTML]]
以外の[[クラス]]の[[属性]]の名前を指定できることになっていました。
;; [158] これは次の [[WD]] では既に削除されています。
*** 選択子3
[REFS[
- [154] [CITE@en[Selectors]] ([TIME[2001-11-15 23:36:43 +09:00]] 版) <http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#class-html>
- [159] [CITE@en[Selectors]] ([TIME[2003-01-28 08:51:53 +09:00]] 版) <http://www.w3.org/TR/2003/WD-CSS21-20030128/selector.html#class-html>
]REFS]
[155] [[CSS2]] や [[選択子3]]は当初から[[クラス選択子]]を含んでいましたが、 [[HTML]] でのみ使えるとされていました。
>>154、>>159 以降は [[SVG]] や [[MathML]] など [[XML]] でも[[語彙]]によって定められた[[クラス]]について使えるとされています。
*** HTML
[162] [[HTML]] 仕様書は [[HTML要素]]の [CODE(HTMLa)@en[[[class]]]]
[[属性]]の[[クラス]]の[[大文字]]と[[小文字]]の区別について明確に規定しました。
*** WebVTT (2010)
[REFS[
- [167] [CITE@en-US-x-hixie[WebVTT Standard]] ([TIME[2011-12-06 00:38:23 +09:00]] 版) <http://dev.w3.org/html5/webvtt/#pseudo-cue-selector>
]REFS]
[168] [[WebVTT]] 仕様書は [[WebVTT]] に対して[[クラス選択子]]が適用される場合の意味を規定しました。
*** 奇癖モード (2014)
[180] [[奇癖モード]]で[[ASCII大文字・小文字不区別]]なのは[[HTML要素]]に限らないため、
[[HTML Standard]] から [[Selectors]] へと規定が移動されました。
[REFS[
- [177] [CITE@en[Bug 23781 – id and class should be case-insensitive in quirks]] ([TIME[2014-05-09 12:05:36 +09:00]] 版) <https://www.w3.org/Bugs/Public/show_bug.cgi?id=23781>
- [178] [CITE[ID/class quirk moved to Selectors spec. Fixes https://www.w3.org/Bugs/Pu... · cfda1c1 · whatwg/quirks]] ([TIME[2014-05-09 12:05:47 +09:00]] 版) <https://github.com/whatwg/quirks/commit/cfda1c1f6d689072118b8e6a9a023f268d3c76be>
- [179] [CITE@en[Web Applications 1.0 r8610 The quirky class/id selector matching case logic moved to selectors]] ([TIME[2014-05-08 02:49:00 +09:00]] 版) <http://html5.org/tools/web-apps-tracker?from=8609&to=8610>
]REFS]
** 関連
[141] [[属性選択子]]で [CODE(CSS)[[[~=]]]] を使ってもほとんど同じ効果が得られます。
* メモ
[41]
[[ISO/IEC 19757]]-3:2006 は
[CODE(XMLe)@en[[QN[[[p]]] [http://purl.oclc.org/dsdl/schematron]]]]
と
[CODE(XMLe)@en[[QN[[[span]]] [http://purl.oclc.org/dsdl/schematron]]]]
が定義されていますが、
[[文書]]の一部を違った示し方にするための[[鍵]]として使えるという説明だけで、
[[構文]]も [CODE(XML)@en[xsd:[[string]]]]
としか規定されていません。
[126]
[CITE@en[MAMA: Common attributes - Opera Developer Community]] ([TIME[2008-11-25 20:26:01 +09:00]] 版) <http://dev.opera.com/articles/view/mama-common-attributes/#class>
[127] [CITE[SMIL 3.0 Structure Module]] ([TIME[2008-12-02 00:45:09 +09:00]] 版) <http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-structure.html#adef-class>
[128] [CITE[我的春秋: 論理構造を文脈に読み換えながら class 名を考える]] ([TIME[2008-12-25 22:21:44 +09:00]] 版) <http://my-chunqiu.cocolog-nifty.com/blog/2007/05/class_67a6.html>
[129] [CITE[Document Structure – SVG Tiny 1.2]] ([TIME[2008-12-20 02:31:29 +09:00]] 版) <http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/struct.html#ClassAttribute>
[130] [CITE[IRC logs: freenode / #whatwg / 20090521]]
([TIME[2009-08-22 21:30:40 +09:00]] 版)
<http://krijnhoetmer.nl/irc-logs/whatwg/20090521#l-84>
[131] [CITE@en[value for class attribute should be CDATA (not NMTOKENS)]]
([[Michael(tm) Smith]] 著, [TIME[2009-05-26 13:18:27 +09:00]] 版)
<http://lists.w3.org/Archives/Public/public-xhtml2/2009May/0033>
[132] [CITE@en[(X)HTML5 Tracking]]
([TIME[2009-10-28 07:00:34 +09:00]] 版)
<http://html5.org/tools/web-apps-tracker?from=4356&to=4357>
[133] [CITE@en[(X)HTML5 Tracking]]
([TIME[2009-10-28 07:02:02 +09:00]] 版)
<http://html5.org/tools/web-apps-tracker?from=4357&to=4358>
[134] [CITE[Bug 8060 – Why must class be a set of unique tokens? It's quite common to have duplicates (~0.5% of dotbot pages), and convenient when you're programmatically generating HTML, and harmless]]
([TIME[2009-10-28 07:03:03 +09:00]] 版)
<http://www.w3.org/Bugs/Public/show_bug.cgi?id=8060>
[138] [CITE@en[XFrames]]
( ([TIME[2010-12-17 00:45:08 +09:00]] 版))
<http://www.w3.org/TR/2010/NOTE-xframes-20101216/#s_common-attributes>
[139] [CITE[Styling – SVG 1.1 (Second Edition)]]
( ([TIME[2011-08-10 12:35:27 +09:00]] 版))
<http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#ClassAttribute>
[170] [CITE@en[Web Applications 1.0 r823 Begone, predefined class names.]]
( ([TIME[2007-05-17 13:18:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=822&to=823>
[171] [CITE@en-US[XML Binding Language (XBL) 2.0]]
( ([TIME[2007-03-16 22:20:16 +09:00]] 版))
<http://www.w3.org/TR/2007/CR-xbl-20070316/#class>
[181] [CITE@en[Web Applications 1.0 r8764 Try to clarify case matching rules for selectors]]
( ([TIME[2014-09-13 02:48:00 +09:00]] 版))
<http://html5.org/r/8764>
[182] [CITE[IRC logs: freenode / #whatwg / 20150105]]
( ([TIME[2015-01-06 11:33:27 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20150105>
[37] [CITE@en[ClassExtensions - WHATWG Wiki]]
([TIME[2014-10-13 10:38:52 +09:00]] 版)
<https://wiki.whatwg.org/wiki/ClassExtensions>
[38] [[Chrome]] では、[[クラス選択子]]に [[MathML]] の[[要素]]の
[CODE(XMLa)@en[[[class]]]] [[属性]]は一致しません。 [TIME[2015-08-11T12:40:35.000Z]]
[39] [CITE@en[Note how the SVG currently implemented in browsers is a mix of SVG 1.… · whatwg/html@969c45b]]
([TIME[2015-11-18 11:29:39 +09:00]] 版)
<https://github.com/whatwg/html/commit/969c45b2478d1d2d3be8564ec85dc316a53c8bcf>
[45] [CITE@en[Shadow: define superglobal slot content attribute · whatwg/dom@e3d8291]]
([TIME[2016-03-24 21:59:06 +09:00]] 版)
<https://github.com/whatwg/dom/commit/e3d82914676ad1e1bf590e1042636e60feddb6ae>
[46] [CITE@en[The DOM Standard defines the class, id, and slot attributes · whatwg/html@36c9938]]
([TIME[2016-03-24 22:01:02 +09:00]] 版)
<https://github.com/whatwg/html/commit/36c9938b102fecadf6029a248f40aae83ea099d2>
[FIG(quote)[
[FIGCAPTION[
[47] [CITE@en[amphtml/amp-html-format.md at master · ampproject/amphtml]]
([TIME[2016-07-04 11:14:07 +09:00]])
<https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md>
]FIGCAPTION]
> Class names, in author stylesheets, may not start with the string -amp-. These are reserved for internal use by the AMP runtime.
]FIG]
[FIG(quote)[
[FIGCAPTION[
[48] [CITE@en[Web Annotation Data Model]]
([TIME[2017-02-24 02:14:26 +09:00]])
<https://w3c.github.io/web-annotation/model/wd2/#h-styles>
]FIGCAPTION]
> styleClass Property The name of the class used in the CSS description that should be applied to the Specific Resource.
]FIG]
[49] [CITE@en[Web Annotation Vocabulary]]
([TIME[2017-02-24 02:14:26 +09:00]])
<https://w3c.github.io/web-annotation/vocab/wd/#h-styleclass>
[50] [[Schematron]] の [CODE(XMLe)@en[span]] [[要素]]や[[段落]]を表す [CODE(XMLe)@en[p]] [[要素]]にも
[CODE(XMLa)@en[class]] [[属性]]があります。
[[Web]] の [CODE(XMLa)@en[class]] [[属性]]と同じ意味かは不明です。
[51] [CITE@en[Clarify case-sensitivity of ID and class attribute selectors]]
([[Zirro]]著, [TIME[2017-06-09 01:26:51 +09:00]])
<https://github.com/whatwg/html/commit/942a9d5b9c0b50bf5bca275e866bb2319ebdca0c>
[53] [CITE[QiitaにおいてHTML要素の属性指定ができなくなりました - Qiita Blog]]
([TIME[2017-07-04 12:03:38 +09:00]])
<http://blog.qiita.com/post/162037299989/disable-html-class>