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

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

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

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

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

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

html<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>