Помилка при використанні кількох CSS селекторів

Розбираємо різницю між селекторами без пробілу та селекторами з пробілом у CSS.

Помилка при використанні кількох CSS селекторів

Пам'ятайте про типову помилку новачків: селектор .bbb.zzz і селектор .bbb .zzz виконують різні дії.

Селектор .bbb.zzz вибирає один елемент, який одночасно має два класи: bbb і zzz.

Селектор .bbb .zzz вибирає елемент з класом zzz, який знаходиться всередині елемента з класом bbb.

.bbb.zzz {
  color: red;
}

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

.bbb .zzz {
  color: red;
}

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

📌 Завдання:

1. Що вибирає селектор h2.zzz?
2. Що вибирає селектор h2 .zzz?
3. Що вибирає селектор .bbb.zzz?
4. Що вибирає селектор .bbb .zzz?
5. Що вибирає селектор .bbb.zzz.xxx?
6. Що вибирає селектор .bbb .zzz.xxx?
7. Що вибирає селектор .bbb.zzz .xxx?
8. Що вибирає селектор .bbb .zzz .xxx?
9. Що вибирає селектор #elem.bbb?
10. Що вибирає селектор #elem .bbb?

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

💡 Підказка: якщо між селекторами немає пробілу — всі умови повинні бути у одного елемента. Якщо є пробіл — шукаємо вкладений елемент.

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

1. h2.zzz — вибирає тільки заголовки h2, які мають клас zzz.

Приклад:
<h2 class="zzz">Заголовок</h2>


2. h2 .zzz — вибирає елементи з класом zzz всередині h2.

Приклад:
<h2>
  <span class="zzz">Текст</span>
</h2>


3. .bbb.zzz — вибирає елемент, який одночасно має класи bbb і zzz.

Приклад:
<div class="bbb zzz">Блок</div>


4. .bbb .zzz — вибирає елементи zzz всередині елемента bbb.

Приклад:
<div class="bbb">
  <p class="zzz">Текст</p>
</div>


5. .bbb.zzz.xxx — вибирає елемент з трьома класами одночасно.

Приклад:
<div class="bbb zzz xxx">Текст</div>


6. .bbb .zzz.xxx — вибирає елемент з класами zzz і xxx всередині bbb.

Приклад:
<div class="bbb">
  <p class="zzz xxx">Текст</p>
</div>


7. .bbb.zzz .xxx — вибирає елемент xxx всередині елемента, який має класи bbb і zzz.

Приклад:
<div class="bbb zzz">
  <span class="xxx">Текст</span>
</div>


8. .bbb .zzz .xxx — вибирає xxx всередині zzz, яке знаходиться всередині bbb.

Приклад:
<div class="bbb">
  <div class="zzz">
    <span class="xxx">Текст</span>
  </div>
</div>


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

Приклад:
<div id="elem" class="bbb">Текст</div>


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

Приклад:
<div id="elem">
  <p class="bbb">Текст</p>
</div>