CSS псевдокласс :empty

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

Псевдокласс :empty может быть полезен для отключения отображения элементов, которые система управления контентом (CMS) сгенерировала без какого-либо содержимого. Например код:

/* Выбор всех элементов <p>, не имеющих содержимого */
p:empty { display: none; }

исключит отображение пустых абзацев.

Обратите внимание, что код:

:empty { display: none; }
     /* или */
*:empty { display: none; }

соответствует всем пустым HTML-элементам, таким как <img>, <hr>, <br> и <input>. Он также будет соответствовать элементу <textarea>, если в нём нет текста, отображаемого по умолчанию.

Таким образом, с точки зрения соответствия элементов (касательно только пустых HTML-элементов), селекторы img, hr, input и img:empty, hr:empty, input:empty являются одинаковыми. Они различаются только с точки зрения специфичности.

Пример

:empty { display: none; }

<hr>

<p>
  Данный CSS-код не даст отобразить горизонтальные линии над
  и под абзацем и уберёт вот этот - <br> - перенос строки!
</p>

<hr>