Довольно часто возникает ситуация, когда для блока, содержащего дочерние элементы или текст, нужно определить одни стили, а в случае их отсутствия - другие. Сделать это довольно легко, если знать о существовании псевдокласса :empty.

Псевдокласс :empty актуален в отношении пустых элементов, а именно, элементов, у которых нет потомков, то есть отсутствуют дочерние элементы и текст, включая пробелы. Наличие комментариев или CSS-свойства content никак на влияет на элемент и не делает его непустым.

Рассмотрим пример:

<p> </p>
<!-- Это непустой элемент, так как он содержит пробел -->

<p></p>
<!-- А это пустой элемент, так как не содержит элементы, текст и пробелы -->

p::before {
  font-family: 'FontAwesome';
  content: '\f118';
}

p:empty::before {
  content: '\f4da';
}

p {
  color: green;
}

p:empty {
  color: red;
}

Посмотрим результат на codepen:

Еще раз обращу Ваше внимание на то, какой элемент можно считать пустым:

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

Такие элементы будут пустыми:

<p></p>

<p><!-- Комментарий --></p>

А такие элементы будут непустыми:

<p> </p>

<p>
</p>

<p>
    <!-- Комментарий -->
</p>

<p><span></span></p>

Обратите внимание, не только пробел, но переход на новую строку делает элемент непустым.

Практическое использование

Псеводкласс :empty очень полезен, когда нужно скрыть сообщения об ошибках или предупреждения, не содержащие текстовую составляющую:

<div class="alert"></div>
<div class="alert">Текст сообщения</div>

.alert {
  background: pink;
  padding: 10px;
}
.alert:empty {
  display: none;
}

Псевдокласс :empty поддерживают практически все актуальные версии наиболее популярных браузеров.

Спасибо за внимание.