CSSにおける一意なidによる要素選択

すでにご存知のように、クラスは要素のグループに割り当てるためのものです。クラスに加えて、要素を一意の識別子である id によって選択することもできます。一意性とは、ページ上にその id を持つ要素が既に存在する場合、同じ id を持つ別の要素があってはならない、ということを意味します。

一意の識別子は、 id 属性を使用して設定され、その中には私たちが考えた名前が書かれます。例えば、2つのブロックを作ってみましょう。最初のブロックに block1 という値の id を設定し、 2番目のブロックには block2 という値を設定します：

<div id="block1">
	<p>text</p>
	<p>text</p>
</div>
<div id="block2">
	<p>text</p>
	<p>text</p>
</div>

指定された id を持つ要素を参照するには、記号 # と私たちが考えた名前を次のように書きます：

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

id 属性は、要素の一意性を強調する必要がある場合に使用されます。クラスは、そのような要素が現在は一つしかなくても、多数存在する可能性があると想定される場合に使用されます。

次のコードがあります：

<div id="elem1">
	<h2>タイトル</h2>
	<p>
		テキスト
	</p>
	<p>
		テキスト
	</p>
</div>
<div id="elem2">
	<h2>タイトル</h2>
	<p>
		テキスト
	</p>
	<p>
		テキスト
	</p>
</div>
<div id="elem3">
	<h2>タイトル</h2>
	<p>
		テキスト
	</p>
	<p>
		テキスト
	</p>
</div>

ブロック elem1 の内容を赤色に、ブロック elem2 を緑色に、ブロック elem3 を青色にそれぞれ着色してください。