Типова помилка новачків у селекторі нащадків

Розберемо різницю між селектором тега з класом і селектором нащадків. Навчимося правильно читати селектори з пробілом.

Типова помилка новачків у селекторі нащадків

Однією з найпоширеніших помилок початківців є неправильне використання пробілу між селекторами. Один зайвий пробіл повністю змінює зміст селектора.

Розглянемо спочатку такий селектор:

p.eee {
  color: red;
}

Цей селектор вибирає всі теги <p>, які мають клас eee.

<p class="eee">
  lorem ipsum
</p>

<p class="eee">
  lorem ipsum
</p>

Тепер подивіться на дуже схожий селектор:

p .eee {
  color: green;
}

Тут між p і .eee є пробіл. Це вже селектор нащадків. Він вибирає не абзаци, а будь-які елементи з класом eee, які знаходяться всередині тегів <p>.

<p>
  lorem <span class="eee">ipsum</span>
</p>

<p>
  lorem <span class="eee">ipsum</span>
</p>

Селектор	Що вибирає
p.eee	Теги <p> з класом eee
p .eee	Будь-які елементи з класом eee всередині <p>

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

📌 Завдання:

№1
Поясніть, що вибирає селектор:
p.bbb { color: red; }
Потім напишіть HTML-код, який підходить під цей селектор.
№2
Поясніть, що вибирає селектор:
p .bbb { color: red; }
Потім напишіть HTML-код, який підходить під цей селектор.
№3
Поясніть, що вибирає селектор:
.eee p.bbb { color: red; }
Потім напишіть HTML-код, який підходить під цей селектор.
№4
Поясніть, що вибирає селектор:
.eee p .bbb { color: red; }
Потім напишіть HTML-код, який підходить під цей селектор.

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

Якщо між селекторами немає пробілу — описуються властивості одного елемента. Якщо є пробіл — це вже селектор нащадків.

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

№1

Селектор вибирає всі теги <p>, які мають клас bbb.

HTML:

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

№2

Селектор вибирає всі елементи з класом bbb, що знаходяться всередині тегів <p>.

HTML:

<p>
  Текст <span class="bbb">виділений</span>
</p>

№3

Селектор вибирає всі теги <p> з класом bbb, які знаходяться всередині елемента з класом eee.

HTML:

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

№4

Селектор вибирає всі елементи з класом bbb, що знаходяться всередині тегів <p>, які, у свою чергу, знаходяться всередині елемента з класом eee.

HTML:

<div class="eee">
  <p>
    Текст <span class="bbb">виділений</span>
  </p>
</div>