Псевдокласс :empty

Псевдокласс :empty выбирает элементы, которые не содержат дочерних элементов или текста.

selector:empty {
 /* Стили для пустых элементов */
}

Пустыми считаются элементы:

1. без вложенных тегов
2. с комментарием
3. с псевдоэлементом
4. без текста или пробельных символов (пробел, невидимый пробел, табуляция, переносы строк)

.element::before {
  content: 'Контент от псевдоэлемента';
}

<!-- Пустые элементы -->

<div></div>
<div class="element"></div>
<div><!-- Комментарий --></div>

<!-- Не пустые элементы -->

<div> </div>
<div>Текс</div>
<div><p><p/></div>
<div>
  <!-- Комментарий -->
</div>

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

Совместимость с браузерами