Справочник HTML & CSS

:empty

Срабатывает у элемента без детей и без текста.

Синтаксис

selector:empty { … }

Примеры

Пустой значок скрыт:

<style>
  .badge { display: inline-block; padding: 2px 8px; background: crimson; color: white; border-radius: 10px; }
  .badge:empty { display: none; }
</style>
 
<p>Inbox <span class="badge">3</span></p>
<p>Spam <span class="badge"></span></p>

Примечания

Даже пробел или перенос строки внутри делают элемент непустым. Комментарии не считаются.

См. также

:not() — Выбирает элементы, которые не подходят ни под один из селекторов в скобках.
display — Определяет, как элемент ведёт себя в потоке и как раскладывает содержимое.

В учебнике

Псевдоклассы — Стили для состояний и положения элементов — hover, focus, ссылки, first-child, nth-child, not и поля форм.