ID-Selektor

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Mit einem ID-Selektor kann man Stilregeln festlegen, die für ein einzelnes HTML-Element auf der Seite gültig sind. Eine Stilregel mit ID-Selektor überschreibt sämtliche anderen CSS-Eigenschaftsdefinitionen, die für ein HTML-Element gelten. In der Stilregel legt man für die ID einen Namen fest und schreibt ihn hinter ein »#«-Symbol. (Anmerkung: Man kann eine ID auch mit einem bestimmten Elementtyp verbinden. Diesen schreibt man vor das #-Zeichen, zum Beispiel div#searchbox. Da in einem HTML-Dokument aber sowieso immer nur ein Element einer bestimmte ID zugewiesen werden kann, ist es überflüssig, die Stilregel auch noch auf ein spezielles Element zu beschränken.) Nur ein einziges Element in einem HTML-Dokument kann der ID-Stilregel zugewiesen werden. Dieselbe ID an mehrere HTML-Tags zu vergeben ist nach der CSS2-Spezifikation ungültig.

Folgende Stilregel definiert ein Element mit der ID einzigartig:

Auch ein ID-Selektor ist nur für Elemente gültig, die mit dem Namen des Selektors in einem HTML-Attribut gekennzeichnet sind. Das folgende Beispiel zeigt, wie man einer ID-Stilregel ein HTML-Element zuweist:

Nehmen wir ein HTML-Dokument, das fünf Mal das Klassenelement <div class="seitenleiste"> enthält. Nun soll der einzige div-Absatz mit einer Suchbox einige Eigenschaften aus der Stilregel für die Klasse seitenleiste übernehmen, das erreichen Sie so:

Das div-Element, das die Suchbox umschließt, sieht in HTML dann so aus:

Da das div-Element die Attribute id="suchbox" und class="seitenleiste" hat, werden alle Deklarationen der Regel für seitenleiste auf die Suchbox angewendet, aber die Suchbox wird mit ihrer eigenen Hintergrundfarbe, die mit background-color in der #suchbox-Regel definiert wurde, dargestellt. Nach dem Prinzip der Kaskadierung (mit dem in CSS geregelt wird, welche Deklaration zum Zuge kommt, wenn es in unterschiedlichen Stilregeln gleich mehrere für dieselbe Eigenschaft eines Elements gibt) erhält eine ID-Regel grundsätzlich den Vorrang gegenüber einer Klassenregel. Weitere Informationen zur Kaskadierung von CSS-Regeln finden Sie unter Kaskadierung und Vererbung in CSS.

Zum gleichen Ergebnis wie im letzten Beispiel kommen wir auch, wenn wir anstatt der ID-Stilregel einfach eine neue Klasse für den div-Bereich mit der Suchbox erstellen. Der Programmieraufwand wäre somit zwar etwas größer, wir wären aber zugleich flexibler für die weitere Arbeit an unserer Seite. Stellen Sie sich einmal vor, Sie haben eine Klasse oder eine andere Regel, die auf alle Überschriften dritter Ordnung angewendet werden soll, mit Ausnahme von einer und Sie haben einen ID-Selektor für diese Ausnahme definiert. Was tun Sie, wenn es nach einem Redesign oder nach inhaltlichen Änderungen der Seite noch mehr solche Ausnahmen geben soll? Dann würde sich der Weg über den ID-Selektor als Sackgasse erweisen: Ein ID-Selektor lässt sich von keiner anderen Stilregel überschreiben.