Der ID-Selektor

Wir haben den Selector-Teil dieses Tutorials mit dem umfangreichsten Selector gestartet, der auf Elemente abzielt. Dann haben wir über den spezifischeren Klassentyp-Selector gesprochen, und jetzt werden wir den spezifischsten Selector-Typ diskutieren: den ID-Selector. Der ID-Selektor ist tatsächlich so spezifisch, dass er nur auf ein einzelnes Element auf der Seite zielt!

Genau wie wir es mit dem Klassenselektor gesehen haben, verwendet der ID-Selektor ein bestimmtes Attribut, das in allen HTML-Tags enthalten ist, um herauszufinden, ob die bestimmte Regel für das Element gilt oder nicht, und das ist das ID-Attribut. Der Wert des ID-Attributs sollte gemäß der HTML-Spezifikation eindeutig sein. Dies bedeutet, dass es nur für ein einzelnes Element pro Seite verwendet werden kann. Infolgedessen sollte ein CSS-ID-Selektor auch nur verwendet werden, wenn Sie ein bestimmtes und eindeutiges Element auf einer Seite als Ziel angeben müssen.

Ein ID-Selektor sieht genauso aus wie ein Klassenselektor, verwendet jedoch anstelle eines Punkts als Präfix das Hash-Zeichen (#). Lassen Sie uns sehen, wie es funktioniert:

<style type="text/css">
#main-header {
	color: GreenYellow;
}
</style>

<h1 id="main-header">Hello, CSS!</h1>

Wie Sie sehen, funktioniert es genau wie Klassen, aber statt eines Punkts verwenden wir ein Hash-Zeichen und statt des Klassenattributs das ID-Attribut - der Unterschied liegt in der Tatsache, dass die ID eindeutig sein sollte , wie in der Einleitung zu diesem Kapitel erläutert.

Warum also überhaupt ID-Selektoren verwenden? Natürlich wird Sie niemand dazu zwingen - Sie können stattdessen Klassenselektoren verwenden, wenn Sie möchten. Durch die Verwendung eines ID-Selektors geben Sie sich selbst und allen anderen, die Markups für Ihr CSS schreiben an, dass der Selektor nur an einer einzigen Stelle verwendet werden soll. Dies wird häufig für Hauptseitenelemente verwendet, z.B.: die Tags, mit denen die Seitenstruktur erstellt wird (Menü, Seitenfeld, Hauptinhalt usw.).

Außerdem haben Sie möglicherweise bereits IDs für einige Ihrer Tags angegeben, z.B.: um sie aus dem JavaScript-Code zu referenzieren. In diesem Fall können Sie einen CSS-ID-Selektor schreiben und ihn automatisch anwenden lassen.

Elementspezifische ID-Selektoren

Genau wie der Klassenselektor können Sie einen ID-Selektor auf einen bestimmten Elementtyp beschränken, indem Sie den Namen wie folgt vor den Selektornamen setzen:

h1#main-header {
	color: GreenYellow;
}

In diesem Fall gilt dieser spezifische ID-Selektor nur für ein Header-Tag (h1).

Zusammenfassung

Mit dem ID-Selektor erhalten Sie eine echte Spezifität: Wenn Sie alle Elemente nach Name / Typ oder Klassenname ausrichten, zielt der ID-Selektor standardmäßig nur auf ein einzelnes Element auf der Seite ab. Verwenden Sie es hauptsächlich für die größeren Strukturelemente auf Ihrer Seite, z.B.: die Navigation, den oberen Bereich, den Hauptinhalt und so weiter.