CSS Schnellstart – Selektor: HTML-Klassen wählen

Du kannst nun alle Elemente eines bestimmten Typs auswählen. Jetzt gibt es natürlich ein Problem: Wenn du simpel einfach alle Elemente auswählst, erwischt du auch Elemente, die du gar nicht auswählen willst.

Manchmal möchtest du aber nicht alle Elemente eines Typs auswählen. Was ist, wenn du Elemente einer bestimmten Gruppe, also mit einem bestimmten Klassenattribut auswählen möchtest?

Nehmen wir folgendes Beispiel:

&lt;p class="mann"&gt;Stefan Steiler&lt;/p&gt;
&lt;p class="frau"&gt;Petra Steiler&lt;/p&gt;
&lt;p class="mann"&gt;Andreas Anders&lt;/p&gt;
&lt;p class="frau"&gt;Andrea Anders&lt;/p&gt;

Sagen wir, du möchtest alle Männer blau und alle Frauen rot darstellen. Diese wurden über das class-Attribut gruppiert. Das machst du mit dem class-Selektor, z.B.

.mann {
  color: blue;
}

Der Selektor startet mit einem Punkt (.) gefolgt vom Namen, der im class-Attribut festgelegt wurde.

Lass uns das mal Live anschauen:

CSS Schnellstart – Selektor: HTML-Klassen wählen

CSS Schnellstart – Modul 1 – CSS Grundlagen einfach verstehen