Elementin valinta useilla luokilla CSS:ssä

Halutessamme voimme valita elementin, jolla on samanaikaisesti kaksi luokkaa, koskematta elementteihin, joissa on vain yksi näistä luokista.

Katsotaanpa esimerkkiä. Oletetaan, että meillä on seuraava koodi:

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

Kuten näet, ensimmäisellä kappaleella on luokka eee, toisella kappaleella - luokka zzz, ja kolmannella kappaleella - molemmat nämä luokat samanaikaisesti.

Valitaan viimeinen kappale koskematta muihin. Kirjoitamme tätä varten yhden luokan nimen ja toisen luokan nimen peräkkäin ilman välilyöntiä:

.eee.zzz {
	color: red;
}

Valitse elementti, jolla on samanaikaisesti luokat eee, zzz ja ccc:

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