Elemendi valimine mitme klassi järgi CSS-is

Soovi korral saame valida elemendi, millel on korraga kaks klassi, puudutamata elemente ühega neist klassidest.

Vaatame näidet. Oletame, et meil on järgmine kood:

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>

Nagu näete, on esimesel lõigul klass eee, teisel lõigul - klass zzz, aga kolmandal lõigul - mõlemad klassid korraga.

Valime viimase lõigu, puudutamata ülejäänud. Selleks kirjutame tihedalt ilma tühikuta ühe klassi nime ja teise klassi nime:

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>