Weitere Infos

Sie lesen:
LB1 (2009)

Little Boxes Teil 1 (Cover)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.

Aktuelle Infos finden Sie hier:

Inhaltsbereich

6.4 Eigene Namen vergeben: ID und class

Mit Kombination von Typ-Selektoren kann man schon einiges erreichen. Richtig praktisch wird die Sache mit den Selektoren aber erst durch die Möglichkeit, einzelnen oder mehreren Elementen im HTML eigene Namenszusätze geben und diese dann im CSS gestalten zu können.

Zur Vergabe von eigenen Namen für bestehende Elemente gibt es im HTML zwei sogenannte Universalattribute, die Sie fast allen Elementen zuweisen können: id und class.

Es kann nur einen geben: ID, der Selektor mit der Raute

ID ist die Kurzform für Identität und im Englischen unter anderem die Abkürzung für »Personalausweis«. Frei nach dem Highlander-Prinzip »Es kann nur einen geben«, darf ein und dieselbe ID pro Webseite nur ein einziges Mal vorkommen:

<div id="wrapper"> ... </div>

Um dieses Element im CSS zu gestalten, benutzen Sie den Namen des Elements und das Rautenzeichen (#) gefolgt von der ID als Selektor:

div#wrapper { ... }

Sie können ID-Selektoren übrigens auch ohne den Namen des Elements davor schreiben, denn eine ID darf ja pro Seite nur einmal auftauchen:

#wrapper { ... }

Die Kombination aus Typ-Selektor und ID bekommt im Rahmen des etwas weiter unten in diesem Kapitel erklärten Punktesystems für Selektoren einen Punkt mehr, was manchmal genau der eine Punkt ist, den man braucht.

Gruppenbildung: class, der Selektor mit dem Punkt

Stellen Sie sich vor, dass Sie auf Ihren Webseiten grau hinterlegte und mit einem Rahmen versehene Infoboxen haben möchten. Um mehrere Absätze auf der Seite gleich zu gestalten, ist ein einfacher Selektor wie p zu ungenau und eine ID nicht geeignet, weil der Wert einer ID pro Webseite nur einmal vorkommen darf. In solchen Situationen benutzen Sie Klassen.

Jeder Absatz, der wie eine solche Infobox aussehen soll, bekommt im HTML das Attribut class:

<p class="infobox">Dieser Text ist eine Infobox.</p>

Um alle so markierten Absätze auszuwählen, schreiben Sie im CSS nach dem Namen des Elements einen Punkt, gefolgt vom Namen der Klasse:

p.infobox {
  color : black;
  background-color: #8c8c8c;
  border: 3px solid #ecf7dd;
}

Wichtig ist der unscheinbare kleine Punkt. Dadurch weiß der Browser, dass diese Regel für alle p-Elemente mit dem Attribut class="infobox" gilt. Ein Beispiel für den Einsatz von Klassen sehen Sie im Abschnitt über das Floaten von Bildern.

Sie können im CSS den Elementnamen auch einfach weglassen, sodass der Selektor mit dem Punkt beginnt:

.infobox {
  color : black;
  background-color: #8c8c8c;
  border: 3px solid #ecf7dd;
}

Sinnvoll ist dies unter anderem, wenn verschiedene HTML-Elemente wie zum Beispiel ul und ol dieselbe Klasse haben.

Man kann ein HTML-Element übrigens auch mit mehreren gestalten. Die einzelnen Klassen werden dabei jeweils durch eine Leerstelle getrennt. Im folgenden Beispiel werden dem div-Element die beiden Klassen .galerie und .clearing zugewiesen:

<div class="galerie clearing"> ... </div>

Wundersamerweise verstehen das alle gängigen Browser.

ID oder Klasse – wann nimmt man was?

Der Unterschied zwischen class und id bereitet vielen CSS-Einsteigern Probleme, ist aber im Grunde ganz einfach:

  • Beide bieten die Möglichkeit, eigene Namenszusätze für HTMLElemente zu vergeben.
  • Eine id ist einmalig und darf auf einer Webseite nur einmal vorkommen.
  • Eine class darf auf einer Webseite mehrfach verwendet werden.

Die Hauptbereiche der Beispielseite wie #kopfbereich oder #textbereich bekommen eine id, weil sie pro Seite einmalig sind. Andere Elemente wie z. B. Infoboxen können hingegen mehrfach auftreten und bekommen deshalb eine class.

ID- und class-Namen sollten die Bedeutung des Elements beschreiben

Der Vorteil der Vergabe von eigenen Namen ist, dass Sie damit wirklich jedes Element auf einer Seite ansprechen können. Der Nachteil ist, dass die Namen im HTML-Quelltext vergeben werden
und dass dadurch die Trennung von Inhalt und Gestaltung zum Teil aufgehoben wird. Jede Änderung der Namen muss im HTML und im CSS erfolgen, sodass es sich lohnt, über die Vergabe von Namen für IDs und Klassen ein bisschen nachzudenken.

Oberster Grundsatz bei der Auswahl der Namen ist, dass diese die Bedeutung des Elements beschreiben und nicht deren Gestaltung. Hier ein Beispiel:

  • Sie wollen die Schrift in einigen Absätzen rot hervorheben, weil diese wichtig sind, und weisen diesen Absätzen deshalb class="rot" zu.
  • Falls Sie die Schriftfarbe später ändern, haben Sie eine Klasse namens rot, die den Text dann blau oder gelb oder sonstwie färbt.

Das ist Täuschen und Tarnen. Ein Name sollte nicht das Aussehen des Elements beschreiben, sondern dessen Bedeutung: Ein besserer Klassenname wäre beispielsweise .wichtig.