CSS псевдокласс :empty

Значение и применение

CSS псевдокласс :empty выбирает каждый элемент, который не содержит дочерних элементов (включая текст/ пробелы).

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

Селектор	Chrome	Firefox	Opera	Safari	IExplorer	Edge
:empty	4.0	3.5	9.6	3.2	9.0	12.0

CSS синтаксис:

:empty {
блок объявлений;
}

Версия CSS

CSS3

Пример использования

<!DOCTYPE html>
<html>
<head>
<title> Псевдоклассы и псевдоэлементы</title>
<style type = "text/css"> 
div.test {
width: 100%; 
height: 25px; 
background-color: YellowGreen;
}
div.test:empty {
background-color: gray; 
}
</style>
</head>
<body>
<div class = "test">Текст</div> /* не пустой (содержит текст) */
<div class = "test"></div> /* пустой */
<div class = "test"> </div> /* не пустой (содержит пробел) */
</body>
</html>

Результат:

Текст

CSS селекторы