:empty

Описание

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

Синтаксис

<element>:empty { /* стили */ }

Примеры

.box {
  background: red;
  height: 200px;
  width: 200px;
}

.box:empty {
  background: lime;
}
<div class="box"><!-- Я буду лаймовым --></div>
<div class="box">Я буду красным</div>
<div class="box">
    <!-- Я буду красным, так как перед комментарием стоят пробелы -->
</div>

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

Спецификация Статус Комментарий
Selectors Level 4
Определение ':empty' в этой спецификации.
Рабочий черновик Без изменений
Selectors Level 3
Определение ':empty' в этой спецификации.
Рекомендация Изначальное определение

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
:emptyChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 9Opera Полная поддержка 9.5Safari Полная поддержка 3.1WebView Android Полная поддержка 2Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 3.1Samsung Internet Android Полная поддержка 1.0
Matches elements with whitespaceChrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See bug 1106296.
IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Смотрите замечания реализации.
Смотрите замечания реализации.