IDセレクタ（ID selectors）

HTML などの構造化言語は，一意型に宣言された属性を持つ場合があります（HTMLの場合は汎用属性のid属性）。

一意属性の特徴は，当該属性をどのように2つ選んできても両者が同じ値を持てないことであり，構造化言語に関わらず要素を一意に識別することができます。言い換えれば文書制作者が，ひとつの文書内に同じ一意属性値を持つ要素を複数回記述してはならないということです。

CSS のIDセレクタは，この一意属性の識別子に基づいたマッチングを行います。IDセレクタは，ハッシュ記号（#）とその直後に続く一意属性値から構成されます。HTML 4文書のid属性とマッチングを行う場合，IDセレクタの識別子は次に示す文字から構成されます：

  • ASCIIアルファベット（a～z，A～Z），および数字（0～9）の範囲にある文字。
  • ハイフン（-），および CSS2 の正誤表からアンダースコア（_）も使用可になった。
  • 上記文字のエスケープか，上記文字のISO10646コードによる参照（構文の章）。
  • ピリオドやコロン（id属性値では指定可能）は，エスケープすることで指定可になる。
  • ただし識別子の先頭は，ASCIIアルファベットから始まらなければなりません。

（補足：ピリオドとコロンはid属性値では指定可ですが，セレクタ構文ではクラスセレクタ等と混同するのでエスケープする必要があります。）

（補足：HTML 4 のid属性値で使える文字は，ASCIIアルファベット（a～z，A～Z）で始まり，任意の数のアルファベット，数字，ハイフン，アンダースコア，コロン，ピリオドのみです。）

id属性値は大文字と小文字が区別されるので注意してください。ただし，大文字・小文字が異なるだけの一意識別子（例："top" と "TOP"）は，一意性に欠けるので同一文書中に出現してはなりません。

#識別子

指定された一意属性値を持つあらゆる要素にマッチします。

次例の規則は，一意属性値がchapter1 である要素にマッチします。

#chapter1 { text-align: center; }

要素型名#識別子

指定された要素型名と一意属性値を持つ要素にマッチします。

次例は，一意属性値がchapter1 であるh1要素にマッチします。

h1#chapter1 { color: green; }

<body>
<h1 id="chapter1">IDセレクタ</h1>
<p> … </p>
<p> … </p>
</body>

IDセレクタは属性セレクタより優先します。

例えば HTML の場合，カスケード処理において#foo は[id="foo"] よりも高い詳細度を持ちます。

補足1：Class と ID（Identifier）を同一視しないでください

気をつけなければならないのは，要素の登場回数ではなく，目的によって class を割り当てるか，id を割り当てるかを使い分けるという点です。文書内に一回しか出現しないものには，すべて id を割り当てれば良いというわけではありません。

  • class属性は当該要素の分類を意味し，id属性は当該要素の固有の識別子を意味しています。
  • id属性の値には，文書構造として一意的に識別できる意味や構造を示す名前を付けるべきです。

HTML や XHTML のid属性は，CSS規則のセレクタとして利用される他にも，ハイパーリンクの目標アンカー（フラグメント識別子）として利用されたり，DOM やXSLT から特定要素を参照するための手段であったり，様々な用途で要素を一意に識別するための重要な汎用属性です。

こういった背景からIDセレクタは，クラスセレクタやその他のセレクタよりもカスケード処理で優先されます。ブラウザによっては，同一文書内に同じ一意属性値を持つ要素が複数存在しても都合よくエラー処理するかもしれませんが，エラー条件をどのように処理するかは UA により様々なので，HTML文書の制作者もユーザーも，特定のエラー復元方法に依存してはなりません。

補足2：HTML の id属性 と name属性 の名前空間について

HTML 4以降のid属性は，a，applet，form，frame，iframe，img，map要素型のname属性を担う役割りを持っており，id属性とname属性は同じ名前空間を共有することに注意してください。つまり，同一文書内では両属性が，ある要素に同じ名前を定めることができないということを意味します。

不正な例：h1要素とa要素の各属性を，同じ識別子に重ねて宣言しているので不正です。単一要素中で両属性が用いられる場合，各々の値は同一でなければなりません。

<h1id="intro"><aname="intro">CSSの概要</a></h1>

例：要素の開始タグに同時に出現するid属性とname属性は，その値が同一でなければなりません。

<h1><a id="intro" name="intro">CSSの概要</a></h1>

XHTML文書で識別子を割り当てる場合にはid属性を用いる必要があります。ただしXHTML 1.0文書では，後方互換性のため同時にname属性も併記することが推奨されます。XHTML 1.1文書型では，フォーム制御をのぞくname属性は廃止されました。