CSS – Class oder ID? Unterschiede?
Da ich es vor allem in verschiedenen Adobe-Programme extrem nervtötend fand (und ein wenig aufgebracht darüber war), wie unsauber man Seitens Adobe mit CSS-Code-Erzeugung umgeht, habe ich mir gedacht, dass ich noch einmal den Unterschied zwischen einer ID und einer Class herausarbeiten sollte. Nicht nur zuletzt wegen der Adobe-Geschichte sondern auch, weil viele Anfänger den Unterschied nicht kennen und nachher bestürzt auf ihre Validierungsergebnisse des W3-Validator für ihren CSS-Code schauen.
Die CSS “Class”
Eine “class” ist eine Eigenschaft, mit welcher wiederholbare Designelemente zugeteilt werden können (z.B. die Hintergrundfarbe und eine definierte Höhe von 2 unterschiedlichen Objekten, die aber genau diese beiden Eigenschaften exakt gleich benutzen).
Im CSS-Code kennzeichnet man eine Klasse mit Hilfe eines Punktes vor dem eigentlichen Klassennamen.
Ein Beispielhafter CSS-Code für eine Class kann wie folgt aussehen:
*.textBox { background-color:blue; float:left; }
h1.negative { background-color:black; color:white; }
Zum einen ist eine Beschreibung für das Element h1 hinterlegt worden. Alle h1-Objekte, welche der Klasse “negative” angehören, werden mit schwarzer Hintergrundfarbe und weißer Schrift dargestellt. Ordnet man die Klasse “negative” jetzt aber einem p-Element zu, so wird das p-Element nicht von den neu vergebenen Eigenschaften profitieren. Anders dagegen ist das der Eigenschaft “textBox“. Diese trifft auf alle Elemente zu, sofern sie als Klasse für diese vergeben wurde.
Die CSS “ID”
Im Gegensatz zu einer CSS-Class existiert die “id”, welche ein einzigartiges Objekt und dessen Eigenschaften auszeichnet. Eine ID kann zwar auch wie eine class benutzt werden (manche Browser zeigen tatsächlich alles korrekt an), dennoch ist es Unsinn dieses Attribut so zu benutzen.
Ein einfacher Beispielcode für eine ID könnte so niedergeschrieben werden:
h2#geheimeUeberschrift { background-color: white; color:white;
Weise ich einem h2-Element nun die id “geheimeUeberschrift” zu, so wird dieses Element auf einem weißen Hintergrund mit weißer Schrift dargestellt. Wichtig ist, dass nur ein einziges Element mit der Eigenschaft “geheimeUeberschrift” existieren darf. Grundsätzlich wird jeder Browser wohl alle Elemente mit dieser ID darstellen, Sinn und Zweck ist es jedoch nur ein Element mit dieser ID vorzufinden. Das HTML-Dokument wäre somit beim späteren validieren nicht valide.
Wichtig: Die Eigenschaften eines ID-Objektes sind gewichtiger als die eines einfachen Class-Objektes. Hat man Beispielsweise für die ID die Breite 125 Pixel definiert und für die Klasse die Breite 250 Pixel und weist aber einem Objekt sowohl eine Klasse als auch eine ID zu, so wird die Eigenschaft (d.h. eine Breite von 125px) der ID-Definition übernommen.
Und wofür das Ganze?
Des Rätsels Lösung: Im Gegensatz zu Klassenelementen können ID-Elemente als Ankerpunkte für Hyperlinks verwendet werden. Offensichtlich ist alles also doch ziemlich gut durchdacht und nicht nur als Schikane für den Entwickler gedacht.
Denkt man genauer nach dann merkt man, dass es keinen Sinn macht, mehrere Ankerpunkte mit dem gleichen Namen zu vergeben – denn woher soll der PC wissen, zu welchem Ankerpunkt der Nutzer nun springen möchte?
Ich hoffe ein wenig Licht in’s Dunkel gebracht zu haben und freue mich über Kommentare und Anregungen!