クラスセレクタ

クラス名（分類名）を使った指定では、そのクラス名が付けられた要素にのみ、スタイルを適用させることができます。

  • 要素のクラス名は、class属性で指定することができます。
.example { color: red; }

上記の例では、example というクラス名が付けられた全ての要素に、このスタイルが適用されることになります。

指定方法

要素名に続けてクラス名を指定する方法と、クラス名だけで指定する方法があります。どちらの場合も、クラス名はピリオド（ . ）に続けて記述します。

p.example1 { color: red; }
.example2 { color: blue; }
.example3 { font-size: 80%; }

example1、example2、example3 の部分がクラス名になります。

クラス名を付ける際には、以下の点に注意してください。

  • 大文字と小文字の区別があります。
  • 使用できる文字は、半角の英数字、ハイフン（ - ）、アンダーバー（ _ ）です。
  • アンダーバー（ _ ）をクラス名に含めると、一部の古いブラウザではクラス名が認識されなくなります。
  • アルファベットで始めなければなりません。（数字や記号で始めてはならない）

適用対象の要素には、次の方法でクラス名を指定しておきます。

<p class="example1">この文字色は赤になります</p>
<p><em class="example2">この文字色は青</em>になります</p>
属性 値
class="" クラス名を指定

要素にclass属性を追加して、その中にクラス名を記述します。（ピリオドは付けません）

次のように、複数のクラス名を同時に指定することもできます。（半角スペースで区切って記述します）

<p class="example2 example3">文字色は青、文字サイズは80%になります</p>

要素名に続けてクラス名を指定

要素名に続けてクラス名を指定すると、そのタイプの要素でのみクラスの指定が適用されます。

p.example { color: red; }

次の例では、example が指定されたp要素にのみ、スタイルが適用されることになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

p.example { color: red; }

</style>

</head>
<body>

<p>このテキストには適用されません</p>

<p class="example">このテキストにスタイルが適用されます</p>

<div class="example">このテキストには適用されません</div>

</body>
</html>

サンプル画面へ新規ウィンドウで表示

クラス名だけで指定

クラス名だけで指定すると、要素のタイプに関連しないクラスの指定が行えます。

.example { color: red; }

次の例では、example が指定された全ての要素に、スタイルが適用されることになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

.example { color: red; }

</style>

</head>
<body>

<p><strong class="example">このテキストにスタイルが適用されます</strong></p>

<p><em class="example">このテキストにスタイルが適用されます</em></p>

<p><span class="example">このテキストにスタイルが適用されます</span></p>

</body>
</html>

サンプル画面へ新規ウィンドウで表示

子孫セレクタ

セレクタとセレクタを半角スペースで区切って記述すると、特定の範囲内にある要素にのみスタイルを適用させることができます。

div.example p { color: red; }

次の例では、example が指定されたdiv要素内のp要素にのみ、color: red が適用されることになります。それ以外のp要素には、このスタイルは適用されません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

div.example p { color: red; }

</style>

</head>
<body>

<div class="example">
<p>このテキストにスタイルが適用されます</p>
<p>このテキストにスタイルが適用されます</p>
</div>

<div>
<p>このテキストには適用されません</p>
</div>

</body>
</html>

サンプル画面へ新規ウィンドウで表示