Кілька селекторів разом у CSS

Як вибирати елементи, які одночасно мають декілька класів або id.

Кілька селекторів разом у CSS

Щоб вибрати елемент, який одночасно відповідає кільком селекторам, потрібно записати ці селектори разом без пробілів.

.bbb.zzz {
  color: red;
}

<p class="bbb zzz">
  Текст
</p>

❗ Важливо:

💡 Якщо між селекторами поставити пробіл, це буде вже селектор потомків.

h2.bbb.zzz {
  color: red;
}

📌 Завдання:

Що вибирає селектор .bbb.zzz?
Що вибирає селектор h2.bbb.zzz?
Що вибирає селектор #elem.bbb?
Створіть HTML для селектора #elem.bbb.zzz
Створіть HTML для селектора h2#elem.bbb

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

Селектори без пробілів означають, що всі умови повинні виконуватися одночасно.

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

1. .bbb.zzz вибирає елемент з двома класами bbb і zzz.

2. h2.bbb.zzz вибирає тільки заголовки h2 з двома класами.

3. #elem.bbb вибирає елемент з id elem і класом bbb.

4. #elem.bbb.zzz вибирає елемент з id elem і двома класами.

5. h2#elem.bbb вибирає заголовок h2 з id elem і класом bbb.