クラスセレクタ

広告

多くの要素で用意されているclass属性を使い、指定の要素の中でclass属性に特定の値が記述されている要素だけを対象となるセレクタです。クラスセレクタとも呼ばれます。

※class属性などに関しては「汎用要素と汎用属性」を参照して下さい。

次のように記述します。 

要素名.値 {
  プロパティ: 値;
}

要素名とclass属性の値をドット(.)で区切って記述します。class属性の値は同じ文書内で複数の要素に同じ値を割り当てることが出来ますので、文書内に含まれる指定した要素の中でclass属性の値が一致する全ての要素が対象となります。

次の例を見てください。p要素に対してclass属性の値として「sample」を指定しています。 

<p class="sample">
...
</p>

この要素にスタイルを割り当てるには次のように記述します。 

p.sample{
  color: #ff0000;
}

p要素の中でclass属性の値が「sample」となっている要素だけにスタイルが適用されます。

複数のclass属性の値を対象にする

要素のclass属性の値は複数の値を指定することが可能です。 

<要素名 class="値1 値2 値3 ...">

そこで複数のclass属性の値が全て含まれる要素だけが対象となるセレクタは次のように記述できます。 

要素名.値1.値2 {
  プロパティ: 値;
}

上記の場合、指定の要素の中で値1と値2の両方の値がclass属性の値として記述されている要素が対象となります。

次の例を見てください。p要素に対してclass属性の値として「sample」と「comment」を指定しています。 

<p class="sample comment">
...
</p>

両方の属性の値が含まれる要素だけにスタイルを割り当てるには次のように記述します。 

p.sample.comment{
  color: #ff0000;
}

全ての要素を対象とする

今までは指定の要素の中で指定のclass属性の値を持つものを対象としていましたが、要素名は指定せずにclass属性の値が一致している要素を対象とするセレクタを記述できます。 

*.値 {
  プロパティ: 値;
}

上記の場合、要素名には関係なくclass属性に指定の値が記述されている要素が対象となります。なお「*」は省略して次のように記述することもできます。 

.値 {
  プロパティ: 値;
}

次の例を見てください。p要素とdiv要素にclass属性の値として「sample」を指定しています。 

<p class="sample">
...
</p>

<div class="sample">
...
</div>

次のようなスタイルを記述するとclass属性の値に「sample」が記述されている全ての要素にスタイルが適用されます。 

.sample{
  color: #ff0000;
}

サンプル

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>CSSの書式</title>
    <style type="text/css">
    li.odd{
     color: #dc143c;
    }

    li.even{
     color: #4682b4;
    }
    </style>
  </head>

  <body>

    <p>
    カテゴリ一覧
    </p>

    <ul>
    <li class="odd">アクション</li>
    <li class="even">ミステリー</li>
    <li class="odd">SF</li>
    <li class="even">ヒューマン</li>
    <li class="odd">ラブストーリー</li>
    <li class="even">ノンフィクション</li>
    </ul>

  </body>
</html>

実際にブラウザで見てみると下記のようになります。

クラスセレクタ

今回はリストの中のli要素に対してclass属性の値として交互に「odd」と「even」を割り当てています。そしてスタイルシートではli.oddとli.evenに別々のスタイルを割り当てることで1行毎に違う見た目になるようにしています。

( Written by Tatsuo Ikura )