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>
Результат
Данный CSS-код не даст отобразить горизонтальные линии над и под абзацем и уберёт вот этот - - перенос строки!