クラスセレクタ（Class selectors）

HTML・XHTML文書において汎用属性のclass属性とマッチングを行う場合，属性セレクタの~= という表記法の代わりにピリオド（.）を使用することができます。クラス属性値はピリオドの直後に記述しなければならず，次に示す文字から構成されなければなりません：

  • ASCIIアルファベット（a～z，A～Z），および数字（0～9）の範囲にある文字。
  • ハイフン（-），および CSS2 の正誤表からアンダースコア（_）も使用可になった。
  • ISO10646 で0xA1以上（CSS1 は0xFFまで）のコードが振られている文字。
  • エスケープされた文字や ISO10646 のコード番号による参照。

ただし識別子の先頭には，数字やハイフンを直接記述してはなりません。

（補足：HTML 4 のclass属性値で使える文字はISO10646文字集合に含まれる任意の文字列です（かなや漢字なども使用可）。class属性の値は大文字と小文字が区別されるので注意してください。

class属性は，ひとつの文書内で同じクラス名を何度でも用いることができるので，文書内で複数の要素を分類することができます。

.クラス名

指定されたclass属性値を持つあらゆる要素にマッチします。

次例の規則は，class属性値がnote であるすべての要素にマッチします。

.note { color: red; background: #fee; }

要素型名.クラス名

指定された要素型名とclass属性値を持つあらゆる要素にマッチします。

次例は，class属性値がnote であるすべてのul要素にマッチします。

ul.note { color: red; background: #fee; }

<ul class="note">
 <li>class属性の値がnoteであるul要素にマッチ。

</li>
 <li>要素型ごとに分類を区別したい時に有効な指定です。

</li> </ul>
<p class="note"> 同じクラス名の指定であっても要素型が異なるとマッチしません。

</p>

.クラス名1.クラス名2

class属性値の単語リストのうち複数の語と照合する場合，各語を任意の順序でピリオド直後に記述します。

下記は，class属性値の単語リストのうち複数の語とマッチングをおこなっている例です。次例の規則は，class属性値のリストのうちnote とref という両方の語を持つp要素にマッチします：

p.note.ref { border: solid thick; }

このセレクタはclass="notespref" にはマッチしますが，class="notesp" にはマッチしません。

  • このセレクタ文法はCSS2 からの概念なので，CSS1適合のUA では不正なセレクタとして扱われます。

補足1：クラス名には「分類」や「意味」を連想できる普遍的な名前を付けましょう

次例の "red" などのように，単なる装飾目的でのクラス名は推奨されません。例えば "赤色" から "橙色" に変更しようと思ったときに矛盾が生じてしまいます。これでは装飾を変更する度にマーク付けを変更する羽目になり，font要素と大差ありません。

仕様書のCSS設計原則で述べられているスタイルシートの変更は、マーク付けに殆ど影響を与えないで容易に行われるべきである という原則を守るべきです。非推奨な例：クラス名に "red" などの恣意的な名前を付けるべきではありません。

<p><strongclass="red">注目！</strong></p>

要素に特別なスタイルを施すということは何か目的があるはずです。例えば，上記では特に注目させる場所という意図でクラスを指定していると考えられます。ですから，クラス名にも"注目" や "注意" という意味の語を割り当てておくのが適切であると言えます。

次例のマーク付けでは，注目させる意図でattention という値をclass属性に設定しています。

<p><strongclass="attention">注目！</strong></p>

色の他に，位置や寸法，余白，フォントなど，恣意的な表現の名前（悪い例：center，indent，margin，font9，w680px）を利用しないでください。

クラス名には，普遍的な意味構造を連想できる分かりやすい名前（良い例：abstract，article，section）を付けるようにしてください。

補足2：div，span要素やクラス属性は適切に，必要最小限に活用しましょう

CSS ではclass属性が非常に大きな力を持っています。

したがって文書制作者は，体裁にほとんど何の関係もない要素（div要素・span要素など）をベースにしてそれらにclass属性でスタイル情報を与えれば，独自の構造化言語を "疑似的に" 設計できると考えられます。しかし，これらに依存することは，普遍的な意味構造を示すところのHTML文書の水準を下げることに繋がるので，余り推奨されません。

文書制作者が定めたクラスは，制作者には有益ですが，ユーザーには理解してもらえないかもしれません。文書制作者の "意図や目的" に適する要素型が HTML に用意されている場合には，その意味構造を示す要素（例えば h1～h6，p，em，strong，dfn など）によってマーク付けすべきです。

更にその構造を分類したい場合にクラスを割り当ててください。

文書制作者の "意図や目的" に適する要素型がどうしても見つからない場合に限り，div・span要素でマーク付けしてください。そしてそれらの要素にはclass属性などの汎用属性（id，title，lang属性など）を指定して，「補足的な構造や情報」を示してください。

div要素は見出しや段落などのブロックレベル要素をまとめるグループとして，span要素は段落内部の単語やフレーズなどに利用すると良いでしょう。