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

CSS селекторы

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

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

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

СелекторChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
:emptycss3 4.03.59.63.29.012.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 селекторы