Часто возникает ситуация, когда нужно задать одни стили для элемента, содержащего дочерние элементы или текст, и другие стили, если этих дочерних элементов или текста нет. Это можно сделать с помощью псевдокласса :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;
}Что считается пустым элементом?
Псевдокласс :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 поддерживается практически всеми актуальными версиями популярных браузеров, что делает его надежным инструментом для веб-разработки.
Заключение
Использование псевдокласса :empty позволяет эффективно управлять стилями элементов в зависимости от их содержимого. Это особенно полезно для улучшения UX, скрывая пустые элементы или выделяя их особым образом.
