skip to main content

:empty

css

Кратко 🔗

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

Пример 🔗

<form class="search-form" action="">
...
</form>
<div class="search-results"></div>
.search-results {
margin-top: 20px;
border-top: 1px solid gray;
}

.search-results:empty {
display: none;
}

В примере выше результаты поиска будут вставлены в блок с классом search-results. Ему задан верхний отступ и рамка. Если результатов нет, то блок останется пустым и будет скрыт. Не будет ни рамки, ни отступа. Если результатов поиска нет, то блок с результатами отображаться не будет.

Без использования псевдокласса :empty у нас на экране будет пустой элемент с верхним отступом и рамкой.

See the Pen :empty by Denis Ezhkov (@ezhkov) on CodePen.

Как это понять 🔗

Потомками элемента могут являться как другие теги, так и текстовый контент, включая пробелы. А вот HTML-комментарии не будут являться потомками.

Например, у подобных элементов есть потомки:

<div></div>

<div>
<!-- test -->
</div>

<div>
</div>

В первом случае потомком является пробел, во втором и третьем - символы переноса строк.

А вот такие элементы браузер будет считать пустыми:

<div></div>

<div><!-- test --></div>

В первом случае внутри тега нет ничего, что могло бы считаться потомком. Во втором случае внутри тега присутствует только комментарий, который также не считается за потомка.

В работе 🔗

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

Автор: Денис,