Вибірка порожніх елементів у CSS

Вибірка порожніх елементів у CSS

Псевдоклас :empty вибирає елементи, які не мають жодного дочірнього елемента або текстового вмісту.

Порожнім вважається тег, у якого всередині немає нічого: ні тексту, ні інших HTML-елементів.

HTML/CSS приклад

<div>
</div>

<p>
  Text
</p>

<span></span>

div:empty,
span:empty {
  width: 100px;
  height: 100px;
  background-color: red;
}

У результаті червоний фон отримають тільки порожні div і span. Абзац із текстом не буде вибраний.

Важливий момент

Навіть пробіл або перенос рядка всередині елемента робить його не порожнім.

<div></div>

<div>
</div>

<div> </div>

Перший div є порожнім. Другий також може бути порожнім залежно від форматування HTML. Третій містить пробіл, тому :empty його не вибере.

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

div:empty,
span:empty,
section:empty {
  background-color: red;
  width: 100px;
  height: 100px;
}