Mehrere Selektoren direkt hintereinander in CSS
Um ein Element auszuwählen, das gleichzeitig auf mehrere Selektoren zutrifft, müssen diese Selektoren direkt hintereinander ohne Leerzeichen geschrieben werden.
Der folgende Selektor wählt beispielsweise ein Element aus,
das gleichzeitig die Klasse bbb und die Klasse
zzz hat:
.bbb.zzz {
}
Und der folgende Selektor wählt die Überschrift h2 aus,
die gleichzeitig die Klasse bbb und die Klasse
zzz hat:
h2.bbb.zzz {
}
Auf diese Weise können beliebige Kombinationen von Selektoren konstruiert werden. Die Reihenfolge der verwendeten Selektoren spielt dabei keine Rolle, bis auf die Regel, dass Tag-Selektoren an den Anfang gestellt werden müssen.
Das heißt, beispielsweise sind die Selektoren .bbb.zzz
und .zzz.bbb vollständig gleichwertig.
Zusätzlich können Selektoren mit
Verwendung von id gebildet werden, zum Beispiel solche:
#elem.eee, oder h2#elem.eee,
oder h2.eee#elem und so weiter.
Erklären Sie, was der Selektor im untenstehenden Code auswählt. Schreiben Sie dann HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:
.bbb.zzz {
color: red;
}
Erklären Sie, was der Selektor im untenstehenden Code auswählt. Schreiben Sie dann HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:
h2.bbb.zzz {
color: red;
}
Erklären Sie, was der Selektor im untenstehenden Code auswählt. Schreiben Sie dann HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:
#elem.bbb {
color: red;
}
Erklären Sie, was der Selektor im untenstehenden Code auswählt. Schreiben Sie dann HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:
#elem.bbb.zzz {
color: red;
}
Erklären Sie, was der Selektor im untenstehenden Code auswählt. Schreiben Sie dann HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:
h2#elem.bbb {
color: red;
}
