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

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

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

p::before {
  font-family: 'FontAwesome';
  content: '\f118';
}
p:empty::before {
  content: '\f4da';
}
p {
  color: green;
}
p:empty {
  color: red;
}

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

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

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

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

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

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

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

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

Текст сообщения

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

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

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