Дмитрий Нечаев
Псевдокласс empty в CSS. Полное руководство с примерами
25 июля 2024 г.Автор
Псевдокласс :empty в CSS используется для выбора и стилизации элементов, которые не содержат дочерних элементов или текстового содержимого. Это полезный инструмент для улучшения внешнего вида веб-страницы и управления пустыми элементами. В этой статье мы подробно рассмотрим псевдокласс :empty, его применение и приведём примеры использования для различных ситуаций.
Что такое псевдокласс :empty?
Псевдокласс :empty применяется к элементам, которые не содержат дочерних элементов или текстового содержимого. Это позволяет легко выбирать и стилизовать такие элементы без необходимости добавления дополнительных классов или атрибутов.
Пример базового использования :empty
div:empty {
/* Стили для пустых элементов */
}Пример использования псевдокласса :empty для изменения фона пустого элемента:
div:empty {
background-color: lightgray;
}В этом примере фон пустого <div> будет светло-серым.
Примеры использования псевдокласса :empty
Основные примеры
Изменение фона пустых элементов
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div:empty {
background-color: lightgray; /* Изменение фона пустого элемента */
height: 50px; /* Установка высоты для визуализации */
}
</style>
<title>Изменение фона пустых элементов</title>
</head>
<body>
<div></div>
<div>Не пустой элемент</div>
</body>
</html>В этом примере фон пустого <div> будет светло-серым, в то время как другой <div>, содержащий текст, останется без изменений.
Добавление рамки к пустым элементам
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p:empty {
border: 2px dashed red; /* Добавление красной пунктирной рамки к пустому элементу */
padding: 10px; /* Внутренние отступы для визуализации */
}
</style>
<title>Добавление рамки к пустым элементам</title>
</head>
<body>
<p></p>
<p>Не пустой абзац</p>
</body>
</html>В этом примере к пустому <p> будет добавлена красная пунктирная рамка.
Сложные примеры
Скрытие пустых элементов
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
span:empty {
display: none; /* Скрытие пустого элемента */
}
</style>
<title>Скрытие пустых элементов</title>
</head>
<body>
<span></span>
<span>Не пустой элемент</span>
</body>
</html>В этом примере пустой <span> будет скрыт.
Указание на пустые поля формы
Пример использования :empty для указания на пустые поля формы:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.form-field:empty {
border: 2px solid red; /* Добавление красной рамки к пустому полю формы */
}
.form-field {
height: 50px; /* Установка высоты для визуализации */
}
</style>
<title>Указание на пустые поля формы</title>
</head>
<body>
<div class="form-field"></div>
<div class="form-field">Заполненное поле</div>
</body>
</html>В этом примере пустое поле формы будет выделено красной рамкой.
Комбинирование с другими псевдоклассами
Комбинирование с псевдоклассом :hover
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div:empty:hover {
background-color: lightblue; /* Изменение фона при наведении на пустой элемент */
}
</style>
<title>Комбинирование с псевдоклассом :hover</title>
</head>
<body>
<div></div>
<div>Не пустой элемент</div>
</body>
</html>В этом примере фон пустого <div> изменится на светло-голубой при наведении курсора.
Комбинирование с псевдоклассом :before
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div:empty::before {
content: "Пустой элемент"; /* Добавление текста перед пустым элементом */
color: red; /* Цвет текста */
}
</style>
<title>Комбинирование с псевдоклассом :before</title>
</head>
<body>
<div></div>
<div>Не пустой элемент</div>
</body>
</html>В этом примере к пустому <div> будет добавлен текст "Пустой элемент" перед его содержимым.
Использование в реальных проектах
Стилизация пустых ячеек таблицы
Пример использования псевдокласса :empty для стилизации пустых ячеек таблицы:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
width: 100%;
border-collapse: collapse;
}
td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
td:empty {
background-color: #f2dede; /* Изменение фона пустой ячейки */
color: #a94442; /* Цвет текста пустой ячейки */
}
</style>
<title>Стилизация пустых ячеек таблицы</title>
</head>
<body>
<table>
<tr>
<td>Ячейка 1</td>
<td></td>
<td>Ячейка 3</td>
</tr>
<tr>
<td></td>
<td>Ячейка 2</td>
<td></td>
</tr>
</table>
</body>
</html>В этом примере фон пустых ячеек таблицы изменится на светло-красный, а текст станет тёмно-красным.
Обработка пустых элементов списка
Пример использования псевдокласса :empty для стилизации пустых элементов списка:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
border: 1px solid #ccc;
margin-bottom: 5px;
}
li:empty {
background-color: #f9f9f9; /* Изменение фона пустого элемента списка */
border-color: red; /* Изменение цвета границы пустого элемента списка */
}
</style>
<title>Обработка пустых элементов списка</title>
</head>
<body>
<ul>
<li></li>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
<li></li>
</ul>
</body>
</html>В этом примере пустые элементы списка будут иметь светло-серый фон и красную границу.
Заключение
Псевдокласс :empty в CSS предоставляет мощный способ для выбора и стилизации элементов, которые не содержат дочерних элементов или текстового содержимого. Это позволяет создавать более точные и гибкие правила стилизации, улучшая внешний вид и функциональность веб-страниц. Понимание различных способов использования псевдокласса :empty, а также его комбинирование с другими селекторами и псевдоклассами, помогает разработчикам создавать адаптивные и поддерживаемые стили. Экспериментируйте с различными подходами и находите оптимальные решения для ваших проектов.
Карта развития разработчика
Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile