CSSにおける要素のクラス

前回のレッスンでは、タグ名でページ要素を選択し、例えばすべての段落に同時にスタイルを適用しました。しかし、ページには異なるスタイルを適用する必要がある異なる種類の段落が存在する可能性があります。この問題を解決するために、異なる段落を異なるCSS クラスに分類することができます。

タグを何らかのクラスに所属させるには、そのタグに属性 class を書き、その中に、文字、数字、アンダースコア、ハイフンで構成される独自のクラス名を指定します。

例を見てみましょう。クラス eee と zzz の2種類を持つ段落を作成します：

<p class="eee">
	paragraph with class eee
</p>
<p class="eee">
	paragraph with class eee
</p>
<p class="zzz">
	paragraph with class zzz
</p>
<p class="zzz">
	paragraph with class zzz
</p>

それでは、CSSで異なるクラスを持つ段落にアクセスし、何らかのスタイルを適用してみましょう。例えば、クラス zzz を持つ段落を赤色に、クラス eee を持つ段落を緑色にします。

これを行うには、CSSファイルでクラスにアクセスする必要があります。アクセスの構文は次のとおりです：最初にドット記号を書き、その後に独自のクラス名を続けます。つまり、クラス eee にアクセスするには .eee と書き、クラス zzz にアクセスするには .zzz と書きます。

では、説明したことを実装しましょう。作成したHTMLに、定義したクラス用のCSSスタイルも追加します：

.eee {
	color: green;
}
.zzz {
	color: red;
}

コードを実行すると、結果は次のようになります：

次のコードが与えられています：

<ul>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
</ul>

クラス odd を持つ要素を赤色に、クラス eve を持つ要素を緑色にしてください。

次のコードが与えられています：

<h2 class="eee">Title</h2>
<p class="eee">
	paragraph
</p>
<p class="eee">
	paragraph
</p>
<p>
	paragraph without class
</p>

<ul class="eee">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

クラス eee を持つすべての要素を赤色にしてください。

前のタスクで、なぜ li タグが赤色になるのか、その理由を説明してください。色を指定するクラスは ul タグに割り当てられているにもかかわらずです。