При желании мы можем выбрать элемент, имеющий одновременно два класса, не затронув элементы с одним из этих классов.
Давайте посмотрим на примере. Пусть у нас есть следующий код:
<p class="eee">
абзац
</p>
<p class="zzz">
абзац
</p>
<p class="eee zzz">
абзац
</p>
Как вы видите, первый абзац имеет класс eee,
второй абзац - класс zzz, а третий
абзац - одновременно оба этих класса.
Давайте выберем последний абзац, не затронув остальные. Для этого слитно без пробела напишем имя одного класса и имя второго класса:
.eee.zzz {
color: red;
}
Выберите элемент, одновременно имеющий классы
eee, zzz и ccc:
<p class="eee">
абзац
</p>
<p class="zzz">
абзац
</p>
<p class="ccc">
абзац
</p>
<p class="eee zzz ccc">
абзац
</p>