CSSにおける要素のクラス

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

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

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

html<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スタイルも追加します：

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

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

html<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>

html<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>