Псевдоклас :empty вибирає всі порожні елементи, це такі елементи, всередині яких немає дочірніх елементів та тексту, включаючи пробіли та переноси. Порожніми будуть вважатися такі елементи.
<code data-language="html"><div></div> <div><!--Порожній--></div>
Коментар, як бачите, не враховується і елемент, у якому міститься коментар, теж вважається порожнім.
Відповідно, до непустих належать такі елементи.
<code data-language="html"><div> </div> <!--Є пробіл--> <div> </div> <!--Є символ--> <div>Бла-бла</div> <!--Є текст--> <div><span></span></div> <!--Є дочірній елемент--> <div> </div> <!--Є перенесення тексту-->
У прикладі 1 порожні елементи виділяються зеленим фоном, а інші елементи червоним.
Приклад 1. Використання :empty
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:empty</title> <style> div { background: #f05347; /* Червоний колір фону */
height: 20px; /* Висота */
margin-bottom: 1rem; /* Відступ знизу */
}
div:empty { background: green; /* Зелений колір фону */
}
</style>
</head>
<body> <div></div> <div><!--Порожній--></div> <div>Текст</div> <div>
</div> <div> </div> <div>
</div> <div><span></span></div> <div> <!--Є переноси-->
</div>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Мал. 1. Порожні елементи
Псевдоклас :blank працює подібним чином, але пробіли та перенесення тексту не враховуються. Таким чином, :blank вважає порожніми наступні елементи.
<code data-language="html"><div> </div> <div><!--Порожній--></div> <div> </div> <div> </div>
Псевдоклас :blank не підтримується браузерами.