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

:empty — это CSS псевдокласс, который соответствует любому элементу, у которого нет дочерних узлов. Дочерними узлами могут быть как элементы, так и текст (включая пробелы). Комментарии, инструкции обработки и CSS content не влияют на то, считается ли элемент пустым.

Попробуйте

div:empty {
  outline: 2px solid deeppink;
  height: 1em;
}

<p>Element with no content:</p>
<div></div>

<p>Element with comment:</p>
<div><!-- A comment --></div>

<p>Element with nested empty element:</p>
<div><p></p></div>

Синтаксис

:empty {
  /* ... */
}

Доступность

Вспомогательные технологии, например программы чтения с экрана, не могут обработать интерактивное содержимое, если оно пустое. У всего интерактивного содержимого должно быть доступное имя, которое задаётся текстовым значением родительского элемента интерактивного элемента (ссылок, кнопок и т. д.). Доступные имена делают интерактивный элемент видимым для дерева доступности — API, передающего полезную для вспомогательных технологий информацию.

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

• [Что такое доступное имя?

  Vispero](https://vispero.com/resources/what-is-an-accessible-name/)

• [Скрытое содержимое для повышения доступности

  Go Make Things](https://gomakethings.com/articles/hidden-content-for-better-a11y/)

• Пояснения MDN к WCAG, рекомендация 2.4

• [Понимание критерия успеха 2.4.4

  Понимание WCAG 2.0 от W3C](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html)

Примеры

HTML

<div class="box"><!-- I will be lime. --></div>
<div class="box">I will be pink.</div>
<div class="box">
  <!-- I will be pink in older browsers because of the whitespace around this comment. -->
</div>
<div class="box">
  <p>
    <!-- I will be pink in all browsers because of the non-collapsible whitespace and elements around this comment. -->
  </p>
</div>

CSS

body {
  display: flex;
  justify-content: space-around;
}

.box {
  background: pink;
  height: 80px;
  width: 80px;
}

.box:empty {
  background: lime;
}

Результат

Спецификации

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

См. также

• :-moz-only-whitespace — версия с префиксом, реализующая изменения из Selectors Level 4
• :blank