ID セレクター

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

CSS の ID セレクター (ID selector) は、 id 属性の値に基づいて要素と一致します。選択される要素の id 属性は、セレクターで指定した値と完全一致していなければなりません。

css

/* id="demo" のついた要素 */
#demo {
  border: red 2px solid;
}

構文

css

#id_value {
  /* … */
}

なお、これは次の属性セレクターと等価です (ただし、詳細度は異なります)。

css

[id="id_value"] {
  /* … */
}

id_value の値は有効な CSS 識別子でなければなりません。有効な CSS 識別子ではない HTML の id 属性は、クラスセレクターで使用する前にエスケープする必要があります。

html

<p id="blue">この段落は青い背景です。</p>
<p>これは単なる通常の段落です。</p>

html

<!-- 次の 2 つの段落には、CSS でエスケープしなければならない文字を含む
id 属性が設定されています -->

<p id="item?one">この段落はピンクの背景です。</p>
<p id="123item">この段落は黄色い背景です。</p>

css

#blue {
  background-color: skyblue;
}

css

/* 次の 2 つのルールでは、id 属性はエスケープしなければならない */

#item\?one {
  background-color: pink;
}

#\00003123item {
  background-color: yellow;
}

次のルール内の ID セレクターは有効な CSS 識別子ではないため、無視されます。

css

#item?one {
  background-color: green;
}

#123item {
  background-color: green;
}

仕様書
Selectors Level 4 # id-selectors

このページは MDN の貢献者によって 2026年2月23日に最終更新されました。