Auswahl von Elementen nach mehreren Klassen in CSS
Bei Bedarf können wir ein Element auswählen, das gleichzeitig zwei Klassen hat, ohne die Elemente mit nur einer dieser Klassen zu betreffen.
Schauen wir uns ein Beispiel an. Nehmen wir an, wir haben den folgenden Code:
<p class="eee">
This is a paragraph with text.
</p>
<p class="zzz">
This is a paragraph with text.
</p>
<p class="eee zzz">
This is a paragraph with text.
</p>
Wie Sie sehen, hat der erste Absatz die Klasse eee,
der zweite Absatz - die Klasse zzz, und der dritte
Absatz - gleichzeitig beide dieser Klassen.
Wählen wir nun den letzten Absatz aus, ohne die anderen zu betreffen. Dazu schreiben wir, ohne Leerzeichen, den Namen einer Klasse und den Namen der zweiten Klasse direkt hintereinander:
.eee.zzz {
color: red;
}
Wählen Sie das Element aus, das gleichzeitig die Klassen
eee, zzz und ccc hat:
<p class="eee">
This is a paragraph with text.
</p>
<p class="zzz">
This is a paragraph with text.
</p>
<p class="ccc">
This is a paragraph with text.
</p>
<p class="eee zzz ccc">
This is a paragraph with text.
</p>