CSS ID-Selektor – Referenz und Beispiel

stylesheet.css · ID-Selektor

#kopf {
  outline: 2px solid #7A2FB0;
}

Überschrift

Erster Absatz direkt nach der Überschrift, mit einem Link und einem Zitat.

Zweiter Absatz, Klasse extra.

Erster Listenpunkt
Zweiter Listenpunkt mit Link
Dritter Listenpunkt

Dritter Absatz, ohne Klasse.

Selektor#kopf

Treffer–

Spezifität–

Syntax

#value { Deklarationen }
E#value { Deklarationen }

Ein ID-Selektor besteht aus einem universellen Selektor oder einem Elementselektor, dem ein Gatterzeichen (engl. 'hash') und der ID-Wert unmittelbar folgt.

Bedeutung

ID-Selektoren sind den Class-Selektoren sehr ähnlich, weisen aber einige wichtige Unterschiede auf:

Ein ID-Wert darf zwar innerhalb einer Website beliebig oft auftreten, ist aber in jedem HTML- oder XHTML- Dokument nur einmal zugelassen. Hierfür werden Identifizierer mit unterschiedlicher Groß-/Kleinschrift als gleich angesehen. So darf z. B. ein Attribut mit dem Wert #abc100 nicht auftreten, wenn bereits ein anderes Attribut mit dem Wert #ABC100 im selben Webdokument vorhanden ist. (Dies ist nur möglich in HTML-Dateien, da in XHTML-Dateien keine Großschreibung erlaubt ist.) Diese Vorschrift wird von allen standardstreuen Browsern eingehalten. Es gibt aber keine Bestimmung darüber, wie ein Anwenderprogramm reagiert, wenn doch einmal ein Identifizierer mehrfach auftritt – es wäre denkbar, dass nur das erste oder nur das letzte Auftreten des Identifizierers berücksichtigt wird, oder dass der Browser alle Vorkommen des Identifizierers ignoriert oder dass er trotzdem alle darstellt, oder .... Wir sehen, es gibt eine Menge denkbarer Möglichkeiten. Letztlich ist das Verhalten der Browser nur dann vorhersagbar, wenn jeder ID-Selektor nur auf ein Subjekt in einer HTML-Datei zeigt.
Zum Zweck des Musterabgleichs im Standards-Modus sind ID-Selektoren jedoch abhängig von der Groß-/Kleinschreibung. Eine im Stylesheet für den Selektor #ABC100 definierte Regel paßt nicht mit dem Wert #abc100 eines ID-Attributs im HTML- Dokument zusammen. Dies gilt auch für XHTML- Dokumente, denn im Unterschied zu Element- und Attributbezeichnungen dürfen die Attributwerte dort groß und klein geschrieben werden.
Arbeitet man im Quirks-Modus, dann spielt die Groß-/Kleinschreibung keine Rolle.
ID-Selektoren haben eine höhere Spezifizität als Attributselektoren, auch wenn sich, technisch gesehen, mit Attributselektoren dieselbe Auswirkung erzielen lässt.

Eine weitere Besonderheit des ID-Selektors ist, dass sich das Attribut ID innerhalb beliebiger Elemente als Anker einsetzen lässt. Das Attribut ID übernimmt in dem Fall dieselbe Funktion wie das Attribut name.

Beispiele

Die folgenden drei Regeln veranschaulichen die höhere Spezifizität der ID-Selektoren:

P#red { Deklarationen } /* Spezifizität: 0-1-0-1 */
P[id=red] { Deklarationen } /* Spezifizität: 0-0-1-1 */
DIV P[id=blue] { Deklarationen } /* Spezifizität: 0-0-1-2 */

Die Regeln a und b haben, technisch gesehen, zunächst identische Auswirkungen, sie unterscheiden sich nur in der Schreibweise. Da Regel b jedoch als Attributselektor formatiert ist, weist sie eine geringere Spezifizität als Regel a auf. Der Unterschied wird deutlich, wenn man zusätzlich die Regel c betrachtet. Allein durch eine zusätzliche Elementangabe (DIV) erhält Regel c eine höhere Spezifizität als Regel b und hat damit Vorrang.

Nur Inline-Styles haben eine höhere Spezifizität als ID-Selektoren.

Das folgende Beispiel basiert auf einem Beispiel aus der CSS2-Spezifikation. Hier wird der ID-Selektor value in der Style-Regel dem Selektor H3 zugeordnet, im HTML- Dokument jedoch auf ein P-Element angewendet.

<head>
<title>match ID selector</title>
 <style type="text/css">
  H3#value { color:#006; }
 </style>
</head>
<body>
 <p id="value">textausgabe</p>
</body>

Da der Musterabgleich hier nicht paßt, der Wert value aber nur einmal im Dokument auftreten darf, hat die oben stehende Regel keine Auswirkung.

Das letzte Beispiel illustriert die Anwendung des ID-Selektors als Anker:

<head>
<style type="text/css">
h2#hes { background: transparent
     url(/graphics/hes.gif) no-repeat right center; }
</style>
</head>
<body>
<p>Die diesjährigen Schulferien des Landes Hessen finden Sie
 <a href="ferien.html#hes">hier</a>:</p>
...
<h2 id="hes">Ferientermine in Hessen</h2>
...

Über die Eigenschaft background ist hier zusätzlich eine kleine kennzeichnende Grafik hinterlegt.

Browserunterstützung

: Der ID-Selektor wird von allen modernen Browsern erkannt.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Das Gewicht einer Kennung

Ein Kennungsselektor wiegt 0,1,0,0 und steht damit über allem, was aus Klassen und Elementnamen zusammengesetzt ist. Eine Regel mit einer Kennung schlägt eine Regel mit zehn Klassen, denn verglichen wird stellenweise von links nach rechts, und die erste Stelle, an der sich zwei Selektoren unterscheiden, entscheidet allein.

Das ist der praktische Grund für die Zurückhaltung, mit der Kennungen in Stylesheets verwendet werden. Was einmal über eine Kennung gesetzt ist, lässt sich später nur noch über eine weitere Kennung oder eine ausdrücklich als wichtig erklärte Regel ändern.

Die Kennung selbst bleibt davon unberührt. Als Sprungziel und als Ankerpunkt für Skripte ist sie unverzichtbar; die Frage ist allein, ob die Gestaltung an ihr hängen soll.

Besonderheiten im Medientyp `handheld`

ID-Selektoren sind Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1. Sie werden von den meisten Mobilgeräten erkannt.

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

Selektor ID-Selektor