Edit

Page

Page title:

Page body:

[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]]
属性の使用法は避けるべきです。

* 歴史

** HTML3

[57] [CITE@en[draft-ietf-html-style-00]], [TIME[2024-09-28T04:41:08.000Z]] <https://datatracker.ietf.org/doc/html/draft-ietf-html-style-00>

[58] [CITE@en[draft-ietf-html-style-01]], [TIME[2024-09-28T04:41:21.000Z]] <https://datatracker.ietf.org/doc/html/draft-ietf-html-style-01>

** 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]] 
の[[級選択子]]に使うことができます。

;; 
注意: 細かい意味や構文はそれぞれの仕様により異なることがあります。

[65] 
[[DTBook]] にも [[HTML4]] から移入されました。

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

[FIG(quote)[
[FIGCAPTION[
[54] [CITE@en[AMP HTML Specification – AMP]]
([TIME[2018-02-14 10:04:22 +09:00]])
<https://www.ampproject.org/docs/reference/spec>
]FIGCAPTION]

> Internal AMP class names prefixed with -amp- and i-amp- are disallowed in AMP HTML.
> Consult AMP documentation for meaning of class names prefixed with amp-. The use of these classes is allowed and meant to allow customization of some features of AMP runtime and extensions.
> All other authored class names are allowed in AMP HTML markup.

]FIG]

[55] [CITE@en[Reference SVG 2]]
([[dstorey]]著, [TIME[2018-05-18 15:05:35 +09:00]])
<https://github.com/whatwg/html/commit/7069de4fcf2f92295dded520ed5d7275addab2e7>

[56] [CITE@en[Alternate Style Tags 1.1]]
([TIME[2017-01-22 12:51:25 +09:00]])
<http://www.idpf.org/epub/altss-tags/>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Errors

Page name(s)