:empty CSS

Псевдокласс :empty находит любой элемент, у которого нет потомков.

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

Наследуется:
Нет
Анимируется:
Нет
Спецификации:

Синтаксис

/* Selects any <div> that contains no content */
div:empty {
  background: lime;
}

Примеры

HTML

<div class="box"><!-- I will be lime. --></div>
<div class="box">I will be pink.</div>
<div class="box">
    <!-- I will be pink because of the whitespace around this comment. -->
</div>

CSS

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

.box:empty {
  background: lime;
}

Результат

Результат работы псевдокласса :empty
Результат работы псевдокласса :empty