CSS クラス選択子詳細

クラスセレクタは、ドキュメント要素に関連なくスタイルを指定することができます。

CSS クラス選択子

クラスセレクタは、ドキュメント要素に関連なくスタイルを指定することができます。

このセレクタは単独で使用できるだけでなく、他の要素と組み合わせて使用することもできます。

ヒント：これらのセレクタを使用するには、まず適切にドキュメントをマークアップする必要があります。したがって、これらのセレクタを使用するには、いくつかの構想や計画が必要です。

特定のデザイン要素に関係なくスタイルを適用する最も一般的な方法は、クラスセレクタを使用することです。

HTMLコードの修正

クラスセレクタを利用する前に、特定のドキュメントマークアップを変更する必要があります。これにより、クラスセレクタが正常に動作します。

クラスセレクタのスタイルを要素に関連付けるために、適切な値をclassに指定する必要があります。以下のHTMLコードをご覧ください：

<h1 class="important">
この見出しは非常に重要です。
</h1>
<p class="important">
この段落は非常に重要です。
</p>

上記のコードでは、二つの要素のclassがimportantに指定されています：最初の見出し（h1要素）、二つ目の段落（p要素）。

構文

それから、以下の構文を使用してこれらの分類された要素にスタイルを適用します。すなわち、クラス名の前に点号（.）があり、ワイルドカードセレクタを組み合わせます：

*.important {color:red;}

すべてのクラス名が同じ要素を選択したい場合、クラスセレクタではワイルドカードセレクタを省略することができます。これは何も悪い影響はありません：

.important {color:red;}

自分で試してみてください

要素セレクタと組み合わせる

クラスセレクタは要素セレクタと組み合わせて使用できます。

例えば、段落のみが赤いテキストとして表示されるようにしたい場合があります：

p.important {color:red;}

現在の選択子は、class属性にimportantが含まれるすべてのp要素をマッチングしますが、他のどんなタイプの要素もマッチングしません。選択子p.importantは「class属性の値がimportantのすべての段落」と解釈されます。h1要素は段落ではありませんので、このルールの選択子と一致しません。したがって、h1要素は赤いテキストに変わりません。

h1要素に異なるスタイルを指定したい場合は、選択子h1.importantを使用できます：

p.important {color:red;}
h1.important {color:blue;}

自分で試してみてください

CSSの多クラスセレクタ

前節では、class値に一つの単語が含まれる場合を処理しました。HTMLでは、class値には、スペースで区切られた単語リストが含まれることがあります。例えば、特定の要素を重要（important）および警告（warning）の両方にマークしたい場合は、次のように書けます：

<p class="important warning">
この段落は非常に重要な警告です。
</p>

この二つの単語の順序は重要ではありません。warning importantとして書いても良いです。

classがimportantのすべての要素が太字で、classがwarningのすべての要素がイタリックで、importantおよびwarningを両方含むすべての要素には銀色の背景があると仮定します。次のように書ける：

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

自分で試してみてください

二つのクラスセレクタをリンクして、選択できるこれらのクラス名をすべて含む要素の要素（クラス名の順序は問いません）。

多クラス選択子にクラス名リストにないクラス名が含まれていれば、一致は失敗します。以下の規則を見てください：

.important.urgent {background:silver;}

予想通り、この選択子はclass属性にimportantとurgentという単語が含まれるp要素にのみ一致します。したがって、class属性にimportantとwarningという単語のみが含まれるp要素は一致しません。ただし、以下の要素には一致します：

<p class="important urgent warning">
この段落は非常に重要で緊急の警告です。
</p>

自分で試してみてください

重要事項：IE7以前のバージョンのInternet Explorerでは、異なるプラットフォームのInternet Explorerが多クラス選択子を正しく処理できないことがあります。