Klassen und IDs in CSS

CSS Tutorial  >  Klassen und IDs

Wie bereits auf der Seite zu CSS-Syntax erwähnt, werden sowohl Klassen- als auch ID-Selektoren vom Benutzer selbst erstellt.

Klassen

Eine Klasse wird durch einen Punkt (.) vor dem Namen des Selektoren bestimmt. Die Syntax zur Deklaration eines Klassenselektoren ist:

.[Klassenname] {
  Eigenschaft:Wert;
  ...
}

Ein Beispiel:

.navbar { color:#0000FF; }

Um diesen Style in HTML zu benutzen, schreiben wir den folgenden Code:

<p class="navbar">Dies ist ein Beispiel zu Klassenselektoren.</p>

Der obenstehende HTML-Code erzeugt dann dies:

Dies ist ein Beispiel zu Klassenselektoren.

Wir können weiterhin einen Klassenselektor in verschiedenen Instanzen benutzen. Dies kann mit folgendem Syntax erreicht werden:

[Typ-Selektor].[Klassenname] {
  Eigenschaft:Wert;
  ...
}

Wenn wir zum Beispiel das folgende CSS-Statement haben:

b.special {   color:#0000FF; } i.special {   color:#FF0000; }

würde der folgende HTML-Code,

Dies zeigt wie <b class="special">verschiedene Instanzen</b> eines Selektoren <i class="special">benutzt werden können</i>.

so aussehen:

Dies zeigt wie verschiedene Instanzen eines Selektoren benutzt werden können.

Mehrfache Klassen

Es ist möglich, mehrere Klassen zur gleichen Zeit anzuwenden. Wenn wir zum Beispiel das folgende CSS-Statement haben:

.applylarge {   font-size:20px; } .applyred {   color:#FF0000; }

würde der folgende HTML-Code,

<p class="applylarge applyred">Dies ist ein Beispiel zu mehreren Klassen.</p>

so aussehen:

Dies ist ein Beispiel zu mehreren Klassen.

IDs

Eine ID wird durch eine Rautenzeichen (#) vor dem Namen des Selektoren bestimmt. Die Syntax zur Deklaration eines ID-Selektoren ist:

#[ID-Name] {
  Eigenschaft:Wert;
  ...
}

Ein Beispiel:

#footer { color:#FF00FF; }

Um diesen Style in HTML zu benutzen, schreiben wir den folgenden Code:

<p id="footer">Dies ist ein Beispiel zu ID-Selektoren.</p>

Der obenstehende HTML-Code erzeugt dann dies:

Dies ist ein Beispiel zu ID-Selektoren.

Unterschiede zwischen Klassen und IDs

Der Unterschied ist folgender: ein ID-Selektor kann nur einmal innerhalb eines Dokuments aufgerufen werden, ein Klassenselektor mehrere Male. Ein weiterer Unterschied ist: eine ID kann durch Javascripts getElementByID-Funktion aufgerufen werden.

Es gibt keine allgemein akzeptierte Faustregel, für wann man ID und wann Klassen benutzen sollte. Mein Vorschlag wäre folgender: Da Klassen eine größere Flexibilität erlauben, benutzen Sie diese so oft wie möglich, mit der einen Ausnahme, wenn Sie Javascripts getElementByID-Funktion verwenden möchten, in dem Fall benötigen Sie IDs.

Klassen- und ID-Namen werden je nach Groß/Kleinschreibung unterschieden. Zum Beispiel sind .klasseeins und .KlasseEins unterschiedliche Klassen.