Elemente auf Einfache Weise Auswählen

Um Stile anzuwenden, muss CSS mitgeteilt werden, welche HTML-Elemente angesprochen werden sollen. Dies geschieht mithilfe von Selektoren. In diesem Kapitel stehen die drei wichtigsten Selektoren im Mittelpunkt: der Tag-Selektor, der Klassen-Selektor und der ID-Selektor.

Tag-Selektor

Ein Tag-Selektor spricht alle Elemente eines bestimmten HTML-Tags an.
Beispiel-HTML:

<p>It was all in my head.</p>

Beispiel-CSS:

p {
  color: purple;
  font-size: 36px;
  background-color: pink;
}

Diese Regel gilt für jedes <p>-Element auf der Seite.

Tag-Selektoren eignen sich, wenn für alle Elemente dieses Typs ein einheitliches Styling gewünscht ist.

Klassenselektor

Ein Klassenselektor richtet sich an Elemente, die denselben Klassennamen besitzen.
HTML:

<p class="text">This song is another hit.</p>

Im CSS wird der Klassenname mit einem Punkt (.) referenziert, um die Stile zu definieren:

.text {
  color: red;
  font-size: 24px;
  background-color: wheat;
}

Nur Elemente mit class="text" erhalten diese Stile.

Klassenselektoren sind die am häufigsten verwendete Selektortyp in realen Projekten, da sie eine flexible und wiederverwendbare Gestaltung ermöglichen.

Mehrere Klassen

Ein Element kann mehr als eine Klasse besitzen.
HTML:

<p class="text font">We test multiple class names</p>

CSS:

.text {
  color: navy;
}

.font {
  font-size: 24px;
}

Wenn ein Element beide Klassen hat, erhält es die Stile von beiden Selektoren.

Dies macht die klassenbasierte Gestaltung besonders leistungsfähig.

Das <p>-Element mit den Klassen text und font erhält Stile von beiden Selektoren. Die Klasse text setzt die Farbe auf Navy, und die Klasse font legt die Schriftgröße auf 24px fest.

ID-Selektor

Ein ID-Selektor richtet sich an ein eindeutiges Element.

Im HTML wird einem Element ein id-Attribut hinzugefügt:

<p id="title">Choose from different themes.</p>

Im CSS wird die ID mit einem Hashtag (#) referenziert, um die Stile zu definieren:

#title {
  font-weight: 500;
  font-size: 20px;
}

IDs müssen innerhalb einer Seite eindeutig sein.

Obwohl IDs für das Styling verwendet werden können, werden Klassen in der Regel für Konsistenz und Wiederverwendbarkeit bevorzugt.