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

BCD tables only load in the browser

Siehe auch