:empty

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

Попробуйте

Примечание: В Selectors Level 4, псевдокласс :empty был изменён, чтобы работать как :-moz-only-whitespace, но в настоящее время ни один браузер этой поддержки не предоставляет.

Синтаксис

:empty {
  /* ... */
}

Доступность

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

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

Примеры

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

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

.box:empty {
  background: lime;
}

Результат

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

Спецификация
Selectors Level 4 # the-empty-pseudo

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`:empty`	1	12	1	9.5	3.1	18	4	10.1	2	1.0	2
`matches_whitespace`	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет

См. также

:-moz-only-whitespace – Реализация изменений из Selectors Level 4 с префиксом
:blank

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:empty