#id vs .class: der Unterschied, die Spezifität und wann welcher Selektor

Eindeutig oder wiederverwendbar

Der Wert eines id-Attributs darf im Dokument nur einmal vorkommen. Er ist Ziel von Fragmentlinks (#kopf), Anker für Skripte und Verknüpfung für label for. Eine Klasse kann beliebig oft vergeben werden, und ein Element kann mehrere tragen: class="extra wichtig". Für Gestaltung, die sich wiederholt, ist die Klasse der natürliche Haken.

Spezifität: der eigentliche Unterschied in CSS

#kopf hat (0,1,0,0), .extra (0,0,1,0). Da das Tupel von links nach rechts verglichen wird, gewinnt eine ID gegen jede Anzahl von Klassen. Eine Regel mit ID lässt sich später nur mit einer weiteren ID oder !important überschreiben – die Kaskade verliert ihre Abstufung. Deshalb hängen gut wartbare Stylesheets Layout und Komponenten an Klassen und lassen IDs den Skripten und Sprungzielen. Das Spezifitäts-Duell rechnet beide gegeneinander.

Der Ausweg: [id=…]

Wer ein Element mit ID gestalten muss, ohne das Gewicht der ID, benutzt den Attributselektor: [id="kopf"] trifft dasselbe Element mit der Spezifität einer Klasse (0,0,1,0).

Doppelte IDs: ungültig, aber nicht folgenlos

Zwei Elemente mit derselben ID machen das Dokument ungültig, doch kein Browser weigert sich, es darzustellen. Die Selektoren greifen weiter: #kopf färbt beide Elemente. Auseinander laufen HTML und JavaScript – getElementById liefert nur das erste Vorkommen, und ein Sprungziel #kopf führt ebenfalls nur dorthin. Ein Fehler dieser Art fällt deshalb im Stylesheet nie auf und erst später im Skript, was ihn unangenehm zu finden macht.

Was die ID außerhalb des Stylesheets tut

Die ID ist kein Werkzeug der Gestaltung, sondern eine Adresse im Dokument, und sie wird an mehreren Stellen zugleich benutzt. Ein Anhang an die Adresse springt zu dem Element mit dieser Kennung und macht es zum Ziel der Pseudoklasse für das angesteuerte Element. Eine Beschriftung verweist über ihr Zuordnungsattribut auf die Kennung des Formularfeldes und macht damit ihren Text anklickbar. Verweise, die einem Bedienelement seinen Namen oder seine Beschreibung geben, arbeiten ebenfalls über Kennungen.

Daraus folgt eine Faustregel, die viel Streit erspart: Eine Kennung wird vergeben, weil ein anderer Teil des Dokuments auf das Element zeigen muss, und nicht, weil es eingefärbt werden soll. Wer sie ohnehin vergeben hat, darf sie im Stylesheet benutzen – wer nur gestalten will, nimmt eine Klasse. So bleibt die Kennung dort, wo sie gebraucht wird, und die Spezifität des Stylesheets bleibt flach.

Wie Klassennamen in der Praxis vergeben werden

CSS macht keine Vorgaben, was in einem Klassennamen stehen darf, solange er nicht mit einer Ziffer beginnt und Sonderzeichen maskiert sind. Deshalb haben sich Konventionen gebildet. Die eine benennt Bausteine und ihre Teile nach einem festen Schema aus Block, Element und Zustand, sodass sich am Namen ablesen lässt, wozu ein Element gehört; die andere vergibt viele kleine Klassen mit je einer Deklaration und setzt die Gestaltung im Dokument zusammen.

Beide Wege haben denselben Zweck: die Spezifität überall gleich flach zu halten, damit die Reihenfolge der Regeln entscheidet und nicht ein Wettlauf um den stärkeren Selektor. Wichtig für die Praxis ist nur der Grundsatz, dass ein Name beschreibt, was ein Element ist, und nicht, wie es gerade aussieht. Eine Klasse namens rot ist beim nächsten Farbwechsel eine Lüge; eine Klasse namens warnung überlebt ihn. Mehrere Klassen an einem Element sind ausdrücklich erlaubt und die übliche Art, Grundform und Abwandlung zu trennen.

Was beide gemeinsam haben

Bei aller Unterschiedlichkeit gelten für beide dieselben Regeln zur Schreibweise. Ein Name darf nicht mit einer Ziffer beginnen und nicht mit einem Bindestrich gefolgt von einer Ziffer; Umlaute und andere Zeichen jenseits des Grundbestands sind erlaubt, Sonderzeichen müssen im Selektor maskiert werden. Groß- und Kleinschreibung ist in HTML für beide bedeutsam – .Karte und .karte sind zwei verschiedene Namen, was in einem Team ohne Absprache verlässlich zu Fehlern führt.

Und beide sind im Selektor kombinierbar: Ein Element kann über seine Kennung und zusätzlich über eine Klasse angesprochen werden, was die Spezifität weiter anhebt. Genau davon lebt der bekannte Ratschlag, im Stylesheet mit einer einzigen Klasse auszukommen und Kombinationen zu vermeiden – nicht weil sie verboten wären, sondern weil jede zusätzliche Stufe später eine noch höhere verlangt, um sie zu überschreiben.

Wann welcher

• Gestaltung, auch wenn das Element nur einmal vorkommt: Klasse.
• Sprungziel, label for, aria-labelledby, Skripte: ID im HTML – ohne CSS-Regel darauf.
• Eine ID muss gestaltet werden und darf nichts überschreiben: [id=…].

Häufige Fragen