ID

Der #id-Selektor erlaubt es Ihnen, ein Element anhand des HTML-Attributs id anzusprechen. Ähnlich wie Klassennamen in CSS mit einem "Punkt" (.) vor dem Klassennamen gekennzeichnet werden, werden ID-Attribute mit einem "Oktothorpe" (#) vorangestellt, allgemein bekannt als "Rautezeichen" oder "Hash".

<header id="site-header"></header>

#header { /* this is the ID selector */
  background: #eee;
}

ID-Attributwerte sollten eindeutig sein. HTML mit zwei oder mehr identischen ids ist nicht valide und führt zu unvorhersehbaren Ergebnissen. Wenn zwei identische vorhanden sind, wird CSS beide matchen und stylen. JavaScript findet jedoch beim Abfragen einer ID die erste und stoppt.

ID-Selektoren sind extrem mächtig. Sie haben eine sehr hohe Spezifität, allgemein geschrieben als (0, 1, 0, 0). Mit ihnen angewendete Stile überschreiben andere Selektoren, die nur Tags oder Klassen verwenden. Zum Beispiel

Check out this Pen!

Ein Absatz mit sowohl einer ID- als auch einer Klassenattribut wird mit widersprüchlichen CSS-Regeln versehen; obwohl der Klassenselektor (.reusable) unter dem ID-Selektor (#unique) in den CSS steht (er würde normalerweise Stile, die darüber in der "Cascade" stehen, überschreiben), bleibt der Absatz rot, da #unique die blaue Farbe, die von .reusable gesetzt wird, überlagert. Eine unendliche Anzahl von Klassen kann niemals die Spezifität einer ID schlagen (obwohl es einmal einen Fehler gab, bei dem 256 Klassen eine ID schlagen würden).

Hohe Spezifität und Einzigartigkeit bedeuten, dass die Verwendung von #id eine "atomare Option" in CSS ist: übermächtig, unflexibel und unverhältnismäßig effektiv. Die Vermeidung des #id-Selektors in CSS wird als best practice betrachtet: es ist vorzuziehen, eine Klasse in nahezu jedem Fall zu verwenden.

Davon abgesehen haben ID-Attribute mehrere wertvolle Verwendungszwecke außerhalb von CSS

• Bereitstellung eindeutiger Hooks für JavaScript
• Elemente mit id-Attributen können durch Anker-Tags angesprochen werden, indem das href-Attribut auf den id-Wert gesetzt wird, vorangestellt mit einem #-Symbol. Das Klicken auf diesen Ankerlink wird die aktuelle Seite auf das Element mit der übereinstimmenden id fokussieren. Dies wird als "Fragment-Identifikator" bezeichnet.
• Für wirklich eindeutige Elemente in Ihrem HTML, wie z.B. Formularelemente, könnten IDs für Dinge wie das Verknüpfen von labels und inputs nützlich sein.

Interessante Punkte

• Eine gültige #id darf nicht mit einer Zahl beginnen und muss mindestens ein Zeichen lang sein. Ein großer Teil der Unicode Zeichen sind valide Zeichen in einer id.
• id-Attribute und -Selektoren sind case-sensitiv und müssen exakt zwischen HTML, CSS und JavaScript übereinstimmen.

Weitere Ressourcen

• MDN Docs

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Alle	Alle	Alle	Alle	Alle	Alle	Alle