CSS псевдокласс :empty
Используйте псевдокласс CSS :empty для выбора пустых элементов. Читайте о псевдоклассе и практикуйтесь на примерах.
CSS псевдокласс :empty выбирает элементы, у которых вообще нет дочерних элементов — ни дочерних тегов, ни текстового содержимого. Он наиболее полезен для стилизации или скрытия «пустых» контейнеров, которые возвращаются из шаблона, CMS или API без содержимого, чтобы убрать пробел, который они иначе оставили бы на странице.
На этой странице рассматривается, как :empty определяет, является ли элемент пустым, ловушка с пробельными символами, о которую спотыкаются большинство разработчиков, практическое применение для скрытия пустых блоков и интерактивные примеры, которые можно редактировать.
Что считается пустым
Элемент соответствует :empty, когда между его открывающим и закрывающим тегами ничего нет — ни текста, ни комментариев в качестве содержимого, ни вложенных элементов:
- Если закрывающий тег сразу следует за открывающим (
<p></p>), элемент считается пустым. - Самозакрывающиеся элементы, такие как
<hr />,<br />и<img />, не могут иметь дочерних элементов, поэтому они всегда соответствуют:empty. - Псевдоэлементы
::beforeи::afterне считаются дочерними. Элемент с генерируемым содержимым из::before/::afterпо-прежнему соответствует:empty, поскольку это содержимое не является частью DOM.
Ловушка с пробельными символами
Пробельные символы считаются текстовым содержимым, поэтому элемент не является пустым, если он содержит пробелы, символы табуляции или переносы строк:
<p></p>
<!-- Matches :empty — truly empty -->
<p>
</p>
<!-- Does NOT match — the newline and spaces are text content -->Это наиболее распространённая причина того, что :empty «не работает»: шаблон, который красиво форматирует свой вывод, оставляет пробельные символы между тегами. Если вам нужно выбирать элементы, содержащие только пробельные символы, обратите внимание на псевдокласс :blank (всё ещё экспериментальный) или удалите пробельные символы в разметке. Для выбора элементов по другим условиям смотрите :not().
Синтаксис
Пример синтаксиса CSS :empty
:empty {
css declarations;
}Пример селектора :empty с тегом <p>:
Пример кода CSS :empty
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:empty {
width: 200px;
height: 30px;
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:empty selector example</h2>
<p>Lorem ipsum is simply dummy text...</p>
<p></p>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Пример селектора :empty с тегом <div>:
Ещё один пример кода CSS :empty
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div:empty {
background-color: #ccc;
padding: 15px;
width: 50%;
height: 50px;
}
</style>
</head>
<body>
<h2>:empty selector example</h2>
<p>
Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<div></div>
<p>
Lorem Ipsum is simply dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Скрытие пустых элементов
Распространённое практическое применение — скрытие элемента, который пришёл пустым, чтобы он не оставлял отступ, рамку или фон. Скомбинируйте :empty с display: none:
/* An alert box that should disappear when it has no message */
.alert:empty {
display: none;
}Теперь <div class="alert"></div> исключается из разметки, тогда как <div class="alert">Saved!</div> отображается нормально. Это позволяет CSS управлять визуальным результатом, не требуя серверной логики для пропуска элемента.
Поддержка браузерами и версии
:empty поддерживается во всех современных браузерах. Он определён в двух спецификациях с одинаковым поведением:
Selectors Level 4 сохраняет то же поведение для :empty, что и Level 3: совпадение только с элементами, у которых абсолютно нет дочерних — текст, комментарии и вложенные элементы — всё это исключает совпадение.