CSS クラスセレクタ

CSS では、クラス選択子は点記号で表示されます：

.center {text-align: center}

上の例では、center クラスを持つすべての HTML 要素は中央に配置されています。

以下の HTML コードでは、h1 と p 要素には center クラスがあります。これは、両者が ".center" 選択子のルールに従うことを意味します。

<h1 class="center">
この見出しは中央に配置されます
</h1>
<p class="center">
この段落は中央に配置されます。
</p>

注意：クラス名の最初の文字は数字を使用することはできません！Mozilla や Firefox では機能しません。

ID と同様に、class も派生選択子として使用できます：

.fancy td {
	color: #f60;
	background: #666;
	}

この例では、クラス名が fancy の大きな要素内のテーブルセルは灰色の背景でオレンジの文字を表示されます。（fancy という名前の大きな要素はテーブルまたは div かもしれません）

要素はまた、クラスに基づいて選択することもできます：

td.fancy {
	color: #f60;
	background: #666;
	}

上記の例では、クラス名が「fancy」のテーブルセルは灰色の背景を持つオレンジ色になります。

<td class="fancy">

クラス「fancy」を任意のテーブル要素に複数回割り当てることができます。この「fancy」でラベル付けられたセルは灰色の背景を持つオレンジ色になります。名前が「fancy」のクラスが割り当てられていないセルはこのルールに影響を受けません。また、クラスが「fancy」のパラグラフも灰色の背景を持つオレンジ色にはなりません。もちろん、他に「fancy」でラベル付けられた要素もこのルールに影響を受けません。これはこのルールの書き方によるもので、この効果は「fancy」でラベル付けられたテーブルセル（td要素を使用して「fancy」クラスを選択する）に限定されます。

関連コンテンツ

クラスセレクタに関するより深い知識を学びたい場合は、CodeW3C.com の高度なチュートリアルを読んでください：CSS クラスセレクタの詳細。