CSS id 選択子

id セレクタ

id セレクタは特定の id がつけられた HTML 要素に特定のスタイルを指定できます。

id セレクタは "#" で定義されます。

以下の 2 つの id セレクタでは、最初のものが要素の色を赤色に、次のものが緑色に定義できます：

#red {color:red;}
#green {color:green;}

以下の HTML コードでは、id 属性が red の p 要素は赤色に、id 属性が green の p 要素は緑色に表示されます。

<p id="red">この段落は赤色。</p>
<p id="green">この段落は緑色。</p>

注意：id 属性は各 HTML ドキュメントで一度しか出現できない。理由を知りたいですか？参照してください XHTML: サイトリコンストラクション。

id セレクタと派生セレクタ

現代のレイアウトでは、id セレクタは派生セレクタの作成によく使用されます。

#sidebar p {
	フォントスタイル: italic;
	text-align: right;
	マージントップ: 0.5em;
	}

上記のスタイルは、id が sidebar の要素内に現れる段落にのみ適用されます。この要素は、div またはテーブルセルである可能性が高いですが、テーブルや他のブロックレベル要素でもあり、インライン要素（例：<em></em> または <span></span>）であってもできますが、インライン要素 <span> に <p> を埋め込むことは違法です（理由を忘れた場合は、参照してください XHTML: サイトリコンストラクション）。

セレクタ、複数の使用方法

サイドバーとしてマークされた要素はドキュメント内に一度しか出現できないが、この id セレクタは派生セレクタとして複数回使用できます：

#sidebar p {
	フォントスタイル: italic;
	text-align: right;
	マージントップ: 0.5em;
	}
#sidebar h2 {
	フォントサイズ: 1em;
	フォントウェイト: normal;
	フォントスタイル: italic;
	マージン: 0;
	行高: 1.5;
	text-align: right;
	}

ここでは、ページ内の他のp要素とは明らかに異なるsidebar内のp要素が特別な処理を受け、また、ページ内の他のすべてのh2要素とは明らかに異なるsidebar内のh2要素も異なる特別な処理を受けます。

単独の選択子

派生選択子を作成するために使われないID選択子でも、独立して機能します：

#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

このルールに従って、idがsidebarの要素は1ピクセルの太さの黒い点状の枠線を持ち、その周りには10ピクセルの内余白（padding、内部スペース）があります。古いバージョンのWindows/IEブラウザは、このルールを無視する可能性がありますが、この選択子が属する要素を明確に定義する必要があります：

div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

関連コンテンツ

ID選択子に関するより深い知識を学びたい場合は、CodeW3C.comの高度なチュートリアルを読んでください：CSS ID 選択子詳細。