:empty: выбор элемента без содержимого
Empty позволяет оформить контейнер, в котором нет дочерних элементов и текстового содержимого. Его удобно изучать на различии действительно пустого узла и узла с пробелом.
Назначение
Empty позволяет оформить контейнер, в котором нет дочерних элементов и текстового содержимого. Его удобно изучать на различии действительно пустого узла и узла с пробелом.
Как это работает
В распространённой реализации браузеров текстовые пробелы мешают совпадению, комментарии — нет. У спецификации есть изменения трактовки пробелов, поэтому проверяйте фактическое поведение целевых браузеров. В примере пустой div записан без перевода строки внутри.
Пример
<style>.empty-demo{min-height:2rem;border:1px solid #8fae9b;margin:.5rem 0}.empty-demo:empty{background:repeating-linear-gradient(45deg,#e5f1e9 0 8px,#fff 8px 16px)}</style>
<p>Сверху пустой блок, снизу блок с пробелом:</p><div class="empty-demo"></div><div class="empty-demo"> </div>Что должно получиться
Первый блок получает полосатый фон. Во многих текущих браузерах второй не совпадает с :empty из-за текстового узла пробела. Границы позволяют увидеть оба контейнера независимо от фона.
Граница применения и частая ошибка
Не используйте :empty как полную проверку отсутствия пользовательских данных: пробелы, вложенные пустые узлы и шаблонные обёртки меняют результат. Важное сообщение «ничего не найдено» лучше выводить реальным текстом, а не только псевдоэлементом CSS.
Самостоятельная проверка
Добавьте в первый блок комментарий, пробел и пустой span по очереди. После каждого изменения проверьте matches(":empty") в своём документе. Запишите версию браузера вместе с наблюдениями.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.