Вибір елемента за кількома класами в CSS

Навчимося вибирати лише ті елементи, які одночасно мають декілька CSS-класів.

Вибір елемента за кількома класами в CSS

У CSS можна вибирати елементи, які одночасно мають кілька класів. При цьому будуть вибрані лише ті елементи, у яких присутні всі зазначені класи.

Розглянемо приклад:

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

Перший абзац має клас eee, другий — клас zzz, а третій — одночасно обидва класи.

Щоб вибрати лише третій абзац, потрібно записати класи разом, без пробілів:

.eee.zzz {
  color: red;
}

❗ Важливо:

Між назвами класів не ставиться пробіл. Якщо написати `.eee .zzz`, це вже буде селектор нащадків, а не елемент із двома класами.

Практичне завдання

📌 Завдання:

№1
Виберіть елемент, який одночасно має класи eee, zzz і ccc.
HTML:
This is a paragraph with text. This is a paragraph with text. This is a paragraph with text. This is a paragraph with text.

💡 Показати підказку

Перерахуйте всі класи підряд через крапку без пробілів.

✅ Показати відповідь

.eee.zzz.ccc {
  color: red;
}