Elem kiválasztása több osztállyal CSS-ben

Ha szeretnénk, kiválaszthatunk egy olyan elemet, amely egyszerre két osztállyal rendelkezik, anélkül, hogy érintenénk az egyik osztállyal rendelkező elemeket.

Nézzük meg egy példán. Tegyük fel, hogy a következő kódunk van:

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>

Amint láthatod, az első bekezdésnek eee osztálya van, a második bekezdésnek - zzz osztálya, a harmadik bekezdésnek pedig - egyszerre mindkét osztálya.

Válasszuk ki az utolsó bekezdést anélkül, hogy érintenénk a többit. Ehhez folyamatosan, szóköz nélkül írjuk le az egyik osztály nevét és a másik osztály nevét:

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>