Element selecteren op meerdere klassen in CSS

Als we willen kunnen we een element selecteren dat tegelijkertijd twee klassen heeft, zonder de elementen met slechts één van deze klassen aan te raken.

Laten we naar een voorbeeld kijken. Stel dat we de volgende code hebben:

<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>

Zoals je ziet, heeft de eerste paragraaf klasse eee, de tweede paragraaf - klasse zzz, en de derde paragraaf - tegelijkertijd beide klassen.

Laten we de laatste paragraaf selecteren, zonder de anderen aan te raken. Hiervoor schrijven we aaneengesloten zonder spatie de naam van de ene klasse en de naam van de tweede klasse:

.eee.zzz {
	color: red;
}

Selecteer het element dat tegelijkertijd de klassen eee, zzz en ccc heeft:

<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>