Um Styles effektiv anzuwenden, ist das Verständnis von CSS-Selektoren erforderlich, da sie bestimmen, welche HTML-Elemente für das Styling ausgewählt werden. Im Folgenden werden die wichtigsten Selektortypen vorgestellt.

Tag-Selektor

Ein Tag-Selektor wählt alle Elemente eines bestimmten Tags aus und sorgt so für ein einheitliches Styling auf der gesamten Seite.

Syntax: Im HTML befindet sich ein p-Element:

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

Um Styles in der CSS-Datei anzuwenden, wird der Tag-Name (p) als Selektor verwendet:

p {
  property: value;
}

Führen Sie das folgende Beispiel aus und überprüfen Sie das Ergebnis.

Klassenselektor

Klassenselektoren adressieren Elemente, die denselben Klassennamen besitzen, und ermöglichen dadurch eine präzisere Steuerung.

Syntax: Im HTML wird ein class-Attribut mit einem aussagekräftigen Klassennamen hinzugefügt:

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

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

.text {
  property: value;
}

Führen Sie das folgende Beispiel aus und beobachten Sie, dass nur Elemente mit der Klasse text diese Stile erhalten, was eine gezieltere Gestaltung ermöglicht.

Alle Elemente mit dem Attribut class="text" werden mit roter Schrift, einer Schriftgröße von 24px und einem Hintergrund in der Farbe wheat gestaltet. Der Klassenname text ist in index.css mit einem vorangestellten . definiert.

Klassenkomposition

Mehrere Klassen können einem einzelnen Element zugewiesen werden, um eine flexible Gestaltung zu ermöglichen.

Syntax: Im HTML werden einem Element mehrere Klassennamen hinzugefügt:

<p class="text font">A robot created chemicals.</p>

Im CSS werden die Stile für jede Klasse separat definiert:

.text {
  property: value;
}

.font {
  property: value;
}

Führen wir das folgende Beispiel aus und sehen, wie es funktioniert. Elemente mit den Klassen text und font erhalten die jeweils festgelegten Stile.

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

Id-Selektoren adressieren ein einzelnes, eindeutiges Element. Da Ids eindeutig sein müssen, wird diese Methode selten für das Styling verwendet.

Syntax: 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 {
  property: value;
}

Das folgende Beispiel demonstriert die Funktionsweise. Hier werden Stile auf das eindeutige Element mit der Id title angewendet.

Das Attribut id="title" identifiziert das <p>-Element eindeutig, und die mit dem Selektor #title definierten Stile gelten ausschließlich für dieses spezifische Element.