ID セレクター
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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 属性は、クラスセレクターで使用する前にエスケープする必要があります。
例
有効な ID セレクター
HTML
html
<p id="blue">この段落は青い背景です。</p>
<p>これは単なる通常の段落です。</p>
html
<!-- 次の 2 つの段落には、CSS でエスケープしなければならない文字を含む
id 属性が設定されています -->
<p id="item?one">この段落はピンクの背景です。</p>
<p id="123item">この段落は黄色い背景です。</p>
CSS
css
#blue {
background-color: skyblue;
}
css
/* 次の 2 つのルールでは、id 属性はエスケープしなければならない */
#item\?one {
background-color: pink;
}
#\00003123item {
background-color: yellow;
}
結果
無効な ID セレクター
次のルール内の ID セレクターは有効な CSS 識別子ではないため、無視されます。
css
#item?one {
background-color: green;
}
#123item {
background-color: green;
}
仕様書
| Specification |
|---|
| Selectors Level 4 # id-selectors |