ID-Selektoren

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Der CSS ID-Selektor wählt ein Element basierend auf dem Wert des id-Attributs des Elements aus. Damit das Element ausgewählt wird, muss sein id-Attribut genau dem im Selektor angegebenen Wert entsprechen.

css
/* The element with id="demo" */
#demo {
  border: red 2px solid;
}

Syntax

css
#id_value { style properties }

Beachten Sie, dass dies syntaktisch (aber nicht in Bezug auf die Spezifität) dem folgenden Attributselektor entspricht:

css
[id=id_value] { style properties }

Der id_value-Wert muss ein gültiger CSS-Bezeichner sein. HTML-id-Attribute, die keine gültigen CSS-Bezeichner sind, müssen escaped werden, bevor sie in ID-Selektoren verwendet werden können.

Beispiele

Gültige ID-Selektoren

HTML

html
<p id="blue">This paragraph has a blue background.</p>
<p>This is just a regular paragraph.</p>
html
<!-- The next two paragraphs have id attributes
that contain characters which must be escaped in CSS -->

<p id="item?one">This paragraph has a pink background.</p>
<p id="123item">This paragraph has a yellow background.</p>

CSS

css
#blue {
  background-color: skyblue;
}
css
/* In the next two rules, the id attributes must be escaped */

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

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

Ergebnis

Ungültige ID-Selektoren

Die ID-Selektoren in den folgenden Regeln sind keine gültigen CSS-Bezeichner und werden ignoriert.

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

#123item {
  background-color: green;
}

Spezifikationen

Specification
Selectors Level 4
# id-selectors

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ID selector (#idName)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch