クラスセレクタ。
CSSでのセレクタ(選択子)の一つである、クラスセレクタに関して解説します。
クラスセレクタとは。
クラスセレクタとは、HTML/XHTMLでのみ有効なセレクタで、特定のclass属性値を与えられた要素に対して適用するセレクタです。
クラスセレクタの書式。
クラスセレクタの書式は、以下のようになります。
セレクタ.クラス名{…}
ここで、セレクタ
としては、
- 特定のクラス名を持つ特定の要素なら当該要素のタイプセレクタ(型セレクタ・要素セレクタ)つまり要素名
- 要素名を問わない場合は全称セレクタ(汎用セレクタ)つまり「
*」
となりますが、要素名を問わない場合なら全称セレクタ(汎用セレクタ)を省略出来ます。
また、複数のクラス名を指定している場合は、「.」で区切って順不同に記述します。
クラス名としては、識別子のルールに従った文字列を使って下さい。
つまり、
- 半角英字, アスキィ文字以外の文字(日本語なら仮名漢字など), エスケープシークェンスで始まり、これらの文字または半角数字や半角ハイフンから成る文字列
を指定してください。
クラスセレクタの記述例。
例えば、HTMLで「text」「note」と言う二つのクラス名を与えられた<p>要素、すなわち<p class="text note">要素へのセレクタとしたい場合は、
p.text.note {…}
または
p.note.text {…}
と記述します。
一方、要素を問わず「note」と言うクラス名を持つ要素へのセレクタとしたい場合は、
.note {…}
と記述します。
複数クラス名の扱い。
クラス名を与えられているセレクタは、当該クラス名を漏れなくclass属性値に含んでいる要素のみを対象とします。
例えば、
p.text {…}
と言うセレクタがあった場合、このセレクタは、
<p class="text">要素<p class="text○○">要素<p class="○○text">要素
などのいずれにも有効となります。
また、
p.note.text {…}
と言うセレクタがあった場合、このセレクタは、
<p class="text note">要素<p class="note text">要素<p class="text note○○">要素<p class="○○text note">要素
などのいずれにも有効となりますが、
<p class="text">要素<p class="note">要素<p class="text○○">要素(○○は「note」以外のクラス名)
などでは「text」「note」のクラス名が漏れなく含まれていないため無効となります。
クラスセレクタの実装上の注意。(平成18年12月19日 更新)
ネットスケープ 4.xなど旧式ユーザエージェント及びオープンウェーヴ社モバイルブラウザでの注意事項。(平成18年12月19日 更新)
ネットスケープ 4.xなど旧式のユーザエージェントでは、複数クラス名を認識出来ません。
また、オープンウェーヴ社のモバイルブラウザも複数クラス名をサポートしておりません。(平成18年12月19日)
従って、ネットスケープ 4.xなど旧式のユーザエージェントでは複数クラス名を与えられた要素にはクラスセレクタで特定のスタイルを適用する事が出来ません。
大文字小文字の違いについて。
HTML及びXMLにおいては、class属性は大文字小文字を区別しますが、ユーザエージェントによっては大文字小文字の違いを区別しないものがありますので注意して下さい。
具体的には以下のようにすれば安全でしょう。
- 大文字小文字の違いしかないクラス名は複数使わない。
- HTMLでのclass属性で記述された通りの文字をCSSでも使う。