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:

html<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ä:

css.eee.zzz {
  color: red;
}

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