CSS: Was ist eigentlich der Unterschied zwischen id und class?

Wer sich CSS durch learning by doing angeeignet hat, statt zu viel Geld in einen dicken Wälzer zu investieren, stellt sich oft die ein oder andere Grundsatzfrage, die sich aus einem handelsüblichen CSS-Code nicht wirklich erschließen lässt. Da wäre zum Beispiel der Unterschied zwischen id und class. Nach welchen Regeln setzt man die beiden ein, wenn sie doch rein optisch auf der Webseite zum gleichen Ergebnis führen?

Na ja, genaugenommen gibt es so gesehen auch keinen Unterschied. Ob ich jetzt id=“namenhiereinfuegen“ oder class=“namenhiereinfuegen“ verwende, der Browser zeigt die jeweils festgelegten Werte ohne Unterschiede an. Das liegt schlicht daran, dass der Unterschied nicht in den CSS-Bezeichnern liegt, sondern im HTML bzw. eigentlich im DOM der Webseite.

Was ist denn jetzt bitte ein DOM? – Hinter dem Kürzel DOM verbirgt sich Document Object Model, also gewissermaßen der Aufbau einer HTML-Seite, die in verschiedene Objektebenen unterteilt ist. Ein Beispiel gibt folgende Grafik am Beispiel der DOM einer Tabelle (Ja, zumindest als Beispiel eigenen sich Tabellen noch recht gut 🙂 ):

id-oder-div

Mit dem id-Attribut können Elemente eindeutig bezeichnet werden, d. h. aber auch, dass der Bezeichner nur einmal je Dokument verwendet werden kann. Eine Klasse hingegen ist keine eindeutige Bezeichnung, sondern viel mehr eine Zuordnung zu einer Gruppe. Außerdem unterscheiden sich die beiden Möglichkeiten übrigens auch im CSS dann doch ein wenig, nämlich etwa in der Wertigkeit. Die durch eine ID eingebundenen Attribute werden höher eingeschätzt, als jene durch eine CLASS.

Wer jetzt nicht tiefer in die doch manchmal recht komplizierte Definitionswelt des W3C einsteigen will, sollte sich vielleicht als Faustregel auch genau am Begriff der Wertigkeit festhalten. Je grundlegender und wichtiger die zu übergebenen Attribute sind, desto eher verwendet man id. Das kann dann zum Beispiel das Grundgerüst einer responsiven Seite sein, während man die Auszeichnung für Bilder usw. mit class zuweist.

About Thomas Matterne

Thomas Matterne ist Chefredakteur des dreisprachigen Online-Magazins DenkZeit und als Online-Marketing-Manager tätig. Der ausgebildete Journalist hat ein Diplom in Wirtschaftsinformatik, und schreibt an dieser Stelle über IT-, Online-Marketing- und SEO-Themen - unteranderem.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.