Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; breadcrumb has a deprecated constructor in /kunden/dciwam.de/webseiten/dciwam/includes/class.breadcrumb.inc.php on line 23
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 id
s 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 id
s 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])
Links
- [1] http://www.w3.org/DOM/
- [2] http://www.w3.org/TR/REC-html40/charset.html#h-5.3.1
- [3] http://www.w3.org/TR/REC-html40/sgml/entities.html
- [4] http://www.w3.org/TR/REC-CSS2/cascade.html
- [5] http://www.w3.org/TR/REC-html40/struct/links.html#anchors-with-id
- Siehe außerdem dazu: Klassennamen und ID-Bezeichnern