Псевдокласс :empty помогает находить пустые HTML-элементы, чтобы применять к ним стили или скрывать их. Это удобно для автоматической очистки интерфейса и улучшения UX без дополнительных классов или JavaScript.

Что делает :empty

Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Псевдокласс :empty применяется к элементам, у которых нет ни текста, ни других вложенных элементов. Даже пробелы или переносы строки считаются содержимым, поэтому элемент должен быть полностью пустым, чтобы селектор сработал.

Пример: скрытие пустых элементов списка

Если вы хотите автоматически скрыть пустые элементы <li> в списке, достаточно добавить простой селектор:

li:empty {
  display: none;
}

Этот стиль автоматически исключит из отображения любые элементы списка, у которых нет содержимого. Это особенно полезно при генерации списка на основе данных, где некоторые пункты могут оказаться пустыми.

Что считается пустым элементом

  • <div></div> — считается пустым.
  • <div> </div> — не считается пустым (есть пробел).
  • <div><br></div> — не считается пустым (есть дочерний элемент).

Чтобы гарантировать, что элемент точно будет пустым, убедитесь, что внутри нет даже невидимых символов (например, пробелов или комментариев).

Пример: очистка формы от пустых полей

Иногда в форме или карточке товара можно оставить пустые контейнеры, например:

<div class="field"></div>
<div class="field">Название товара</div>

Вы можете скрыть все пустые поля с помощью:

.field:empty {
  display: none;
}

Когда использовать :empty

  • Очистка HTML от ненужных блоков без JavaScript.
  • Автоматическая стилизация компонентов, если они пусты (например, скрытие пустых карточек).
  • Быстрое удаление визуального шума при отрисовке динамических данных.

:empty делает интерфейс чище, особенно когда вы работаете с шаблонами или данными, где не всегда гарантировано наличие содержимого.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.