dciwam.de / faq / css / unterschied-id-class

Unterschied zwischen `id` und `class`

Der prinzipielle Unterschied liegt nicht in CSS, sondern in HTML bzw. dem DOM [1]. Mit dem id-Attribut können Elemente eindeutig bezeichnet werden; diese Eindeutigkeit bedingt, dass der Webautor den Bezeichner nur einmal pro Dokument verwenden darf. Eine Klasse hingegen ist keine eindeutige Bezeichnung, sondern viel mehr eine Zuordnung zu einer Gruppe.

Das sollte man sich einfach als zwei unterschiedliche Konzepte vorstellen. Ein Konzept "wichtig" kann sehr oft auftauchen, während ein Konzept wie "Fazit" nur einmal in einem Dokument vorkommt. Es ist auch möglich, dass ein Element zu mehreren Klassen gehört, z.B. class="wichtig aktuell".

Die Attribute in HTML unterscheiden sich auch sehr, so kann man im id-Attributwert keine Entity [2]- oder nummerische Zeichenreferenzen [3] verwenden und auch nur die Zeichen [a-zA-Z][a-zA-Z0-9.:-_]*. Beim class-Attribut dagegen gibt es keine solchen Einschränkungen. In CSS unterscheiden sich die Selektoren für Klassen respektive. IDs durch ihre Wertigkeit (Spezifität, specifity [4]); da ids eindeutig sind, haben sie eine höhere Wertigkeit als alles andere, daher wird der Inhalt des Elementes

<p id="fazit" class="neu">

bei

#fazit { color: green; }
.neu { color: red; }
p { color: black; }

grün dargestellt, da id gegenüber class eine höhere Wertigkeit besitzt.

Außerdem können die ids in moderneren Browser als Ankerziel angesprungen werden.[5]

Beispiel:

I just returned from vacation! Here's a
<a id="anchor-two">photo of my family at the lake.</a>

(Quelle: siehe [5])

Unterschied zwischen id und class

Links

Unterschied zwischen `id` und `class`