ID - CSS-Tricks | CSS-Almanach 2025

Mit dem #idSelektor können Sie ein Element als Ziel festlegen, indem Sie auf das idHTML-Attribut verweisen . Ähnlich wie Klassenattribute in CSS mit einem „Punkt“ ( .) vor dem Klassennamen gekennzeichnet sind, wird ID-Attributen ein „Oktothorpe“ ( #) vorangestellt , das allgemein als „Hash“ oder „ Nummernzeichen “ bezeichnet wird.

#header ( /* this is the ID selector */ background: #eee; )

ID-Attributwerte sollten eindeutig sein. HTML mit zwei oder mehr identischen ids wird nicht validiert und führt zu unvorhersehbaren Ergebnissen. Wenn es zwei gleiche gibt, stimmt CSS immer noch mit beiden überein und formatiert sie. JavaScript findet jedoch bei der Abfrage einer ID die erste und stoppt.

ID-Selektoren sind extrem leistungsfähig. Sie haben eine sehr hohe Spezifität, allgemein geschrieben als (0, 1, 0, 0). Stile, die mit ihnen angewendet werden, überschreiben andere Selektoren, die nur Tags oder Klassen verwenden. Demonstrieren:

Schauen Sie sich diesen Stift an!

Ein Absatz mit einer ID und einem Klassenattribut wird im Widerspruch zu den CSS-Regeln angegeben. Obwohl sich der Klassenselektor .reusable( #unique) im CSS unter dem ID-Selektor ( ) befindet (er überschreibt in der „Kaskade“ im Allgemeinen die darüber liegenden Stile), bleibt der Absatz rot, da #uniquedie von festgelegte blaue Farbe überfordert wird .reusable. Eine unendliche Anzahl von Klassen kann niemals die Spezifität der ID übertreffen (obwohl es zu einem Zeitpunkt einen Fehler gab, bei dem 256 Klassen eine ID schlagen würden).

Hohe Spezifität und Einzigartigkeit bedeuten, dass die Verwendung #ideine CSS- „Nuklearoption“ ist: überlastet, unflexibel und unverhältnismäßig effektiv. Das Vermeiden des #idSelektors in CSS wird als bewährte Methode angesehen: In fast allen Fällen ist es vorzuziehen, eine Klasse zu verwenden.

Abgesehen davon haben ID-Attribute außerhalb von CSS mehrere wertvolle Verwendungszwecke:

Bereitstellung eindeutiger Hooks für JavaScript
Elemente mit idAttributen können durch Ankertags als Ziel ausgewählt werden, indem das hrefAttribut auf den idWert gesetzt wird, dem ein #Symbol vorangestellt ist . Durch Klicken auf diesen Ankerlink wird die aktuelle Seite auf das Element mit der Übereinstimmung neu fokussiert id. Dies wird als "Fragmentkennung" bezeichnet.
Für wirklich eindeutige Elemente in Ihrem HTML-Code, z. B. Formularelemente, können IDs beispielsweise für die Verknüpfung von labels und inputs hilfreich sein .

Sehenswürdigkeiten

Ein gültiger Wert #idkann nicht mit einer Zahl beginnen und muss mindestens ein Zeichen lang sein. Ein großer Teil des Unicodes sind gültige Zeichen in einem id.
id Attribute und Selektoren unterscheiden zwischen Groß- und Kleinschreibung und müssen in HTML, CSS und JavaScript genau übereinstimmen