class

class 属性 (HTML)

[1] HTMLSVGMathML などの class 属性は、 要素クラス (class) を零個以上割り当てるものです。

[2]

要素
HTMLSVGMathML などの要素 (>>13)
名前空間URL
(なし)
属性名
class (「 (クラス) (class) 」より)
属性値
クラス名間隔区切りの並び
既定値
(なし)

仕様書

意味

[136] MathML では、「XSLTCSS と共に使うスタイル・クラス (style class) の集合を要素に関連付ける」 >>135 という意味不明な説明がなされています。

属性値

データ型

[9] この属性属性値は、 HTML 4 仕様書本文では cdata-list とされており、 クラス名 (class name) 空白で区切って複数個指定できるとされています。 また、 HTML 4SGML DTD では CDATA として定義されています。

[6] ISO-HTML の注釈に class は comma separated とか書いてあるけど、あれは一体なんなのだろう。。。

[137] MathML は、「典型的には (word) 間隔で区切った列であるが、 MathML では規定しない」と曖昧なことしか述べていません。 構文は string であるとだけ規定されています。 >>135

既定値

[10] この属性は省略可能です。省略時は級なしになります。

大文字と小文字

[14] HTML では大文字・小文字を区別せず、 XHTML では区別するようです。 (Gecko, WinIE 6) (名無しさん [sage] 2005-06-23 00:33:22 +00:00)

[18] >>14互換モードの動作で、標準モードでは区別するようです。

名前空間接頭辞の導入

[7] Embedding metadata in XHTML and extracting them as RDF <http://www.kanzaki.com/docs/sw/xh2rdf.html>

RFC 2731 のように class 属性にも . をコロン代わりにした修飾名を使ってメタ・データを記述してしまおうという案。 (名無しさん 2004-03-16 01:05:26 +00:00)

意味

[19] 属性値の意味: class 属性には (任意個の) クラス名 (class name) を指定できます。 要素 E にクラス名 N を指定することは、その要素 Eクラス C (N) に含まれることを表します。 HTML 4 14.2.3

[31] 複数のクラス名の順序: 複数のクラス名を指定した場合、その順序が意味を持つのかどうかは、 HTML 4 では規定されていません>>19 のような規定のされ方ですから、 class 属性値におけるクラス名の順序には意味がないと考えるべきでしょう。

というか set (集合) と書いてありますから順序は意味を持ちませんね。

クラス名の適用範囲

[20] クラス名が有効である範囲 (ある要素のクラス名 N と別の要素のクラス名 N が共にクラス C (N) を指すと考えられる範囲) は明確ではありません。

[21] HTML 4 の仕様書を自然に解釈すれば、 1つの文書全体はその名前空間の範囲に収まっていると考えられます。 (そうでなく文書の一部だけなら、特に規定があるはずです。)

[22] しかし、外部スタイル・シートでクラス名を選択子に使い、 そのスタイル・シートを複数の文書から参照するようなことは極々普通に行われています。 その場合、外部スタイル・シート選択子として使われているクラス名 N によって表されるクラス C (N) はそのスタイル・シートを参照するどの文書でも同じものと暗黙に仮定されているといえます。

[23] とはいえ、クラス名が文書よりも大きな適用範囲を持つという規定はありませんし、 文書よりも大きな範囲で共通のクラス名集合を使おうとしてもそれを形式的に記述するための確立された方法もありません。

[24] >>23 に対する提案の1つが >>7 のような XML名前空間型大域的識別子の採用です。この方法ではクラス名は URI によって識別されるます。 >>20 に関して XML名前空間属性名と同じ解決策を採ったといえます。

[25] 別の方法の1つが、共通のクラス名集合を規定して、 何らかの方法でそれに従うことを表明するというものです。 マイクロ書式のうち hCalendarhCard のようなものがここでいう共通なクラス名集合です。

この手法に於いては形式的な記述として profile 属性XMDP などの技術がありますが、 その組合せ方など未解決の問題もあります。

[26] ここで取り上げたクラス名の適用範囲の問題は、 >>27- で扱う、クラスに意味を与える場合において特に重要になります。

要素型とクラス

[28] 要素型クラスの関係について HTML 4 では特に規定がありません。特に規定がないということは、 特に制約がない、両者は直交しているということなのでしょう。

[29] 現実には、クラス要素型を更に細分したものだという解釈もあります。 同じクラス名を異なる要素型には使用しないという条件を満たす限りにおいては、 >>28 の解釈とこの解釈は矛盾しません。

[30] 例えば題名が含まれる cite 要素には title というクラス名を指定し、著者名が含まれる cite 要素には author というクラス名を指定する、というのは >>29 の考えによりフィットします。

[31] 実際のところはクラスとは何かが明確ではないというか割りと何にでも使えるので、 >>28>>29 のどちらの解釈を採っても特に問題になることはないでしょう。

クラスと意味

[27] HTML 4 仕様書の範囲では規定は >>9 の程度であり、 要素クラスに分けられることはわかりますが、 ではそのクラスにどういう意味があるのかは分かりません。 (HTML のレベルでは記述できません。)

[32] >>27 をもって class 属性を使って要素の意味を規定することはできないと主張する人がいます。 まことにもっともな主張ですが、 真に意味がないのであればわざわざクラス分けする必要も価値もありません。 HTML としてクラスが持つ (べき) 意味 (やその存在) が記述できないのだと考えておくのが良いでしょう。

メモ: class で意味を記述できないという主張は divspan を濫用して意味を記述しようとすることへの戒めでもあり、 必ずしも間違ってはいません。

[33] クラスの意味を (情報処理可能な程度に) 規定しようとする試みとして、 マイクロ書式群があります。 hCalendarhCard などではクラス名群とそのクラス名が割当てられた要素が示すものは何であるかを規定しています。 例えば hCard を採用した文書では、 hCard の規定するクラスの意味に従って住所録に登録するなどの処理を行えます。

[34] HTML 5 では規定を明確にし、 profile 属性で指定された HTMLメタ情報プロファイルで規定されたクラスはそこで規定された意味を持ち、 それ以外のクラス名は単なる文字列に過ぎないと定義しています。

<http://www.whatwg.org/specs/web-apps/current-work/#class> (作業中)

[35] 一方 XHTML 2.0class 属性は放置したまま新たに role 属性を導入しています。 role 属性で指定される役割QName で (>>24 の方法)、 役割の意味の記述には RDF を使うことになっています。

<http://www.w3.org/TR/2005/WD-xhtml2-20050527/mod-role.html#adef_role_role> (作業中)

[40] Use or abuse of class? at microformatique - a blog about microformats and “data at the edges” <http://microformatique.com/?p=9> (名無しさん 2006-08-27 01:03:32 +00:00)

[42] class は要素の分類 - Weblog (2007-01-27 07:00:00 +09:00 版) <http://ryus.s21.xrea.com/w/item/841> (名無しさん 2007-01-28 04:12:46 +00:00)

[52] class名に「表示に関する指示を組み込む」ことについて | Tech de Go (2007-04-03 08:37:13 +09:00 版) <http://www.techdego.com/2007/03/classname.php> (名無しさん 2007-04-02 23:41:26 +00:00)

[108] HTMLのためのidとclass - 行動記録 (IWAI, Masaharu 著, 2007-07-26 03:35:14 +09:00 版) <http://iwaim.beering.be/2006/12/id_and_class_for_html.html> (名無しさん 2007-07-28 04:17:45 +00:00)

[149] CSSクラス選択子を導入してclass属性に大きな力を与えているため、 これを使って著者が独自の「言語」を作ることも可能ではあります。 しかしながら、通常のマーク付け言語要素が共通の意味の理解を可能にするのに対し、 著者が独自に割り振ったクラス名は意味の理解性に欠けるものであり、 避けることが好ましいとされています。 >>142

応用

[3] 仕様書 <IW:HTML4:"struct/global.html#id-and-class"> で用途例として挙げられているのは、

です。

[4] スタイルシート, 特に CSSclass 属性の結びつきは強く、特に級選択子が用意されているほどです。 歴史的には class 属性は CSS で使うために定義されたといっても過言ではありません。

とはいえ、現在の class 属性の用途はあくまで要素の分類付けであって、 スタイルシートでの使用は一用途に過ぎません。 表現と構造の分離の原則に則り、 極度に表現に偏った class 属性の使用法は避けるべきです。

歴史

HTML4

実装

[5] class 属性は複数の級名を間隔で分離して列挙できますが、 古い UA (ブラウザや著述工具など) はこれに対応していないものもあります。 DOMclassName を無加工で使っているスクリプトの類なんかも危ない。

[12] WinIE>>5 の通り対応していません。 間隔が入っているとそれも含めて class 名とみなされる(?)ようです。

不思議解釈

[36] HTML辞典 (バージョン1.1.0) (野田工房(mixim) 著、2005年3月15日付け) によると、 class 属性

スタイルシートを間接指定

するものだそうです(謎)。間接指定とは何かと思いつつ style 属性の解説を見ると、 こちらは直接指定なのだそーな。

[11] 級によって CSS で表現方法を変える例

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

(HTML 4 仕様書より、改)

CSS の級選択子を使うと、 class 分けを具体的に表現に反映させることができます。

メモ

[15]

HTML で class="class1 class2" のように複数指定できるという話 (>>16) と、 CSS で .class1.class2 { ... } のように 複数指定できるという話 (>>17) は区別して議論しないと駄目ですよ。。。

[16] HTML の class 属性への class="class1 class2" のような値の複数指定に WinIE が対応したのは 5.0 から。

CLASS Attribute | className Property (A, ACRONYM, ADDRESS, ...) (Internet Explorer) <http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/classname.asp>

(仕様としては class 属性が正式に導入された HTML 4.0 から。 CSS が 1 か 2 かは関係ありません。)

値は左から順にカスケードして適用されていく

<http://e8y.net/blog/index.php/2005/07/24/p124>

これは間違っています。 HTML の class 属性における順序は CSS においては意味がありません。 CSS における規則の優先順位は CSS の中だけで決まります。 実際に CSS で規則を書く順序を入れ替えてみれば、 後から書いたものが優先されるだけだと分かります。

テスト:

[17] CSS.class1.class2 { ... } のようなクラス名の複数指定に WinIE は (WinIE 6.0 でも) 対応していません。

(仕様としては CSS 2 から。)

テスト:

CSS 1 に正しく従っていれば CSS 2 で導入された規則は無視するのが正しく、 どちらのテストも文字が緑色で表示されるはずです。 CSS 2 に正しく従っていればクラス名の複数指定の方を採用して、 どちらのテストも文字が青色で表示されるはずです。

WinIE 6.0 は1つ目が青、2つ目が緑です。つまり間違っています。

[43] WEBTECH - webtech:vantguarde (2007-03-04 14:16:31 +09:00 版) <http://web.g.hatena.ne.jp/vantguarde/20070301#1172740363> (名無しさん 2007-03-04 05:18:42 +00:00)

[44] Default CSS2 style sheet for Web pages on a TV (1998-07-23 22:08:40 +09:00 版) <http://www.w3.org/Style/1998/07/tvweb-style>

[61] Predefined classes are gone (Ian Hickson <ian@...> 著, 2007-05-17 04:42:27 +09:00 版) <http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/10659> (名無しさん 2007-05-17 11:55:43 +00:00)

[74] 複数のclassをセレクタに指定する方法 | Blog hamashun.com (2007-05-25 12:49:09 +09:00 版) <http://www.hamashun.com/blog/2007/05/class_1.html> (名無しさん 2007-05-25 07:18:25 +00:00)

[72] 複数のclassをセレクタに指定する際のメモ書き | Blog hamashun.com (2007-05-25 16:01:20 +09:00 版) <http://www.hamashun.com/blog/2007/05/class_2.html> (名無しさん 2007-05-25 07:16:57 +00:00)

[75] 複数のclassをセレクタに指定した際のIEのバグ | Blog hamashun.com (2007-05-25 16:07:37 +09:00 版) <http://www.hamashun.com/blog/2007/05/classie_1.html> (名無しさん 2007-05-25 07:18:49 +00:00)

[98] WEBTECH - webtech:vantguarde (2007-06-24 16:19:26 +09:00 版) <http://web.g.hatena.ne.jp/vantguarde/20070619#1182258927> (名無しさん 2007-06-24 07:21:31 +00:00)

[99] Unicode for CSS Class Names - Snook.ca (2007-06-24 17:16:00 +09:00 版) <http://snook.ca/archives/html_and_css/unicode_for_css_class_names/> (名無しさん 2007-06-24 09:45:40 +00:00)

[109] class/id values on default Blogs templates (Karl Dubost 著, 2007-05-08 15:31:42 +09:00 版) <http://lists.w3.org/Archives/Public/public-html/2007May/0868.html> (名無しさん)

[110] Re: Research for class="copyright" (was: Re: Getting beyond the ping pong match) (Lachlan Hunt 著, 2007-05-07 00:59:18 +09:00 版) <http://lists.w3.org/Archives/Public/public-html/2007May/0709.html> (名無しさん)

HTML の class と同じ意味の属性

[13] HTML(ほぼ) 同じ意味と構文を持つ (らしい) 属性として、 次のものが見つかっています。

名前空間局所名仕様
(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul)classXBL
(http://www.w3.org/1998/Math/MathML)classMathML
http://www.w3.org/1999/xhtmlclassXHTML 1
(http://www.w3.org/1999/xhtml)classXHTML 1
(http://www.w3.org/2000/svg)classSVG
(http://www.w3.org/2001/SMIL20/Language)classSMIL 2.0
(http://www.w3.org/2002/06/xhtml2)classXHTML 2
http://www.w3.org/2002/06/xhtml2classXHTML 2
(http://www.w3.org/2002/06/xhtml2/)classXHTML 2
http://www.w3.org/2002/06/xhtml2/classXHTML 2
(urn:schemas-microsoft-com:vml)classVML
(urn:x-suika-fam-cx:markup:jis:x:4052:2000:)classJIS X 4052:2000
(xbl:div)classXBL 2.0
(xbl:div)classXBL 2.0
括弧付きの名前空間は、その属性が大域属性ではなく、 その名前空間の要素型 (ほぼ) すべてに定義されている属性であることを表します。

これらの属性は、空白で分割すればある要素の属するの名前の集合が得られ、 それぞれの級名は (例えば) CSS級選択子に使うことができます。

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

[124] SVG quirks - Anne’s Weblog (2007-12-04 11:55:27 +09:00 版) <http://annevankesteren.nl/2007/12/svg-quirks>

[172] OMDoc の多くの要素にも class 属性があります。

クラス選択子

[143] クラス選択子 (class selector) は、class属性の値が指定された値と一致することを表します。

仕様書

意味

[144] クラス選択子class属性に対して属性選択子~= と同じはたらきをします >>142

[145] 適用対象となるclass属性として、 HTMLclass 属性の他、 当該マーク付け言語で適用対象であると規定された属性が存在します。具体例としては SVGclass 属性MathMLclass 属性があります。 >>142

[146] class属性の一覧は >>13 を参照してください。

[147] 一つの要素に複数のclass属性が存在するなら、空白で連結した値に対して適用するものとみなす、 とされています。ただしそのようなケースは見つかっていないとして、規定の一部では無いとされています。 >>142

[148] 理論上は XHTML1 名前空間class 属性SVG要素で指定したりすると起こり得ますが、現実に実装されているのかは不明です。

[166] WebVTT ではWebVTT節点オブジェクト適用可能なクラスclass属性として扱われます。 >>165

構文

[140] WinIE 6クラス名数字から始まっていても受け付けます。 Opera 9 は奇癖モードでだけ受け付けます。 Firefox 2 は受け付けません。

大文字と小文字

[150] 大文字小文字を区別するかはマーク付け言語に依存します。

[151] 奇癖モードでは、クラス選択子の比較はASCII大文字・小文字不区別です。 >>174

[164] それ以外、すなわち XML文書の場合や無奇癖モード限定奇癖モードの場合を明記している仕様書はありませんが、 大文字小文字を区別するものと解されています。
[175] 奇癖モードでは、HTML要素以外の要素でも大文字小文字は区別されません。
[176] 構文解析時ではなく比較時に区別されないので、 CSSOM に現れるクラス選択子は記述されたままの大文字小文字です。

歴史

CSS1

[161] クラス選択子に相当するものは最初期 (>>160) からありました (当時はまだ名前はついていませんでしたが)。

CSS2

クラス選択子

@class

[157] CSS2 の初期は @class @規則により HTML 以外のクラス属性の名前を指定できることになっていました。

[158] これは次の WD では既に削除されています。

選択子3

[155] CSS2選択子3は当初からクラス選択子を含んでいましたが、 HTML でのみ使えるとされていました。 >>154>>159 以降は SVGMathML など XML でも語彙によって定められたクラスについて使えるとされています。

HTML

[162] HTML 仕様書は HTML要素class 属性クラス大文字小文字の区別について明確に規定しました。

WebVTT (2010)

[168] WebVTT 仕様書は WebVTT に対してクラス選択子が適用される場合の意味を規定しました。

奇癖モード (2014)

[180] 奇癖モードASCII大文字・小文字不区別なのはHTML要素に限らないため、 HTML Standard から Selectors へと規定が移動されました。

関連

[141] 属性選択子~= を使ってもほとんど同じ効果が得られます。

メモ

[41] ISO/IEC 19757-3:2006 は pspan が定義されていますが、 文書の一部を違った示し方にするためのとして使えるという説明だけで、 構文xsd:string としか規定されていません。

[126] MAMA: Common attributes - Opera Developer Community ( 版) <http://dev.opera.com/articles/view/mama-common-attributes/#class>

[127] SMIL 3.0 Structure Module ( 版) <http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-structure.html#adef-class>

[128] 我的春秋: 論理構造を文脈に読み換えながら class 名を考える ( 版) <http://my-chunqiu.cocolog-nifty.com/blog/2007/05/class_67a6.html>

[129] Document Structure – SVG Tiny 1.2 ( 版) <http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/struct.html#ClassAttribute>

[130] IRC logs: freenode / #whatwg / 20090521 ( 版) <http://krijnhoetmer.nl/irc-logs/whatwg/20090521#l-84>

[131] value for class attribute should be CDATA (not NMTOKENS) (Michael(tm) Smith 著, 版) <http://lists.w3.org/Archives/Public/public-xhtml2/2009May/0033>

[132] (X)HTML5 Tracking ( 版) <http://html5.org/tools/web-apps-tracker?from=4356&to=4357>

[133] (X)HTML5 Tracking ( 版) <http://html5.org/tools/web-apps-tracker?from=4357&to=4358>

[134] 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 ( 版) <http://www.w3.org/Bugs/Public/show_bug.cgi?id=8060>

[138] XFrames ( ( 版)) <http://www.w3.org/TR/2010/NOTE-xframes-20101216/#s_common-attributes>

[139] Styling – SVG 1.1 (Second Edition) ( ( 版)) <http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#ClassAttribute>

[170] Web Applications 1.0 r823 Begone, predefined class names. ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=822&to=823>

[171] XML Binding Language (XBL) 2.0 ( ( 版)) <http://www.w3.org/TR/2007/CR-xbl-20070316/#class>

[181] Web Applications 1.0 r8764 Try to clarify case matching rules for selectors ( ( 版)) <http://html5.org/r/8764>

[182] IRC logs: freenode / #whatwg / 20150105 ( ( 版)) <http://krijnhoetmer.nl/irc-logs/whatwg/20150105>

[37] ClassExtensions - WHATWG Wiki ( 版) <https://wiki.whatwg.org/wiki/ClassExtensions>

[38] Chrome では、クラス選択子MathML要素class 属性は一致しません。

[39] Note how the SVG currently implemented in browsers is a mix of SVG 1.… · whatwg/html@969c45b ( 版) <https://github.com/whatwg/html/commit/969c45b2478d1d2d3be8564ec85dc316a53c8bcf>

[45] Shadow: define superglobal slot content attribute · whatwg/dom@e3d8291 ( 版) <https://github.com/whatwg/dom/commit/e3d82914676ad1e1bf590e1042636e60feddb6ae>

[46] The DOM Standard defines the class, id, and slot attributes · whatwg/html@36c9938 ( 版) <https://github.com/whatwg/html/commit/36c9938b102fecadf6029a248f40aae83ea099d2>

[47] amphtml/amp-html-format.md at master · ampproject/amphtml () <https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md>

Class names, in author stylesheets, may not start with the string -amp-. These are reserved for internal use by the AMP runtime.

[48] Web Annotation Data Model () <https://w3c.github.io/web-annotation/model/wd2/#h-styles>

styleClass Property The name of the class used in the CSS description that should be applied to the Specific Resource.

[49] Web Annotation Vocabulary () <https://w3c.github.io/web-annotation/vocab/wd/#h-styleclass>

[50] Schematronspan 要素段落を表す p 要素にも class 属性があります。 Webclass 属性と同じ意味かは不明です。

[51] Clarify case-sensitivity of ID and class attribute selectors (Zirro著, ) <https://github.com/whatwg/html/commit/942a9d5b9c0b50bf5bca275e866bb2319ebdca0c>

[53] QiitaにおいてHTML要素の属性指定ができなくなりました - Qiita Blog () <http://blog.qiita.com/post/162037299989/disable-html-class>

[54] AMP HTML Specification – AMP () <https://www.ampproject.org/docs/reference/spec>

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.

[55] Reference SVG 2 (dstorey著, ) <https://github.com/whatwg/html/commit/7069de4fcf2f92295dded520ed5d7275addab2e7>