IDセレクタ

ID（固有の識別名）を使った指定では、1つの要素にだけスタイルを適用させることができます。

  • 要素のIDは、id属性で指定することができます。
#example { color: red; }

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

  • 1つのIDは、同じ文書内で1ヵ所にだけ使用できます。（重複させてはならない）

指定方法

要素名に続けてID名を指定する方法と、ID名だけで指定する方法があります。どちらの場合も、ID名はハッシュ（ # ）に続けて記述します。

h1#example1 { color: red; }
#example2 { color: blue; }

example1 と example2 の部分がIDになります。

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

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

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

<h1 id="example1">この文字色は赤になります</h1>
<h2 id="example2">この文字色は青になります</h2>
属性 値
id="" ID名を指定

要素にid属性を追加して、その中にID名を記述します。（ハッシュは付けません）

<!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">

h1#example1 { color: red; }
#example2 { color: blue; }

</style>

</head>
<body>

<h1 id="example1">このテキストにスタイルが適用されます</h1>

<h2 id="example2">このテキストにスタイルが適用されます</h2>

</body>
</html>

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

子孫セレクタ

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

#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">

#example p { color: red; }

</style>

</head>
<body>

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

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

</body>
</html>

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