логотип PurpleSchool
Иконка входа
Вход
логотип PurpleSchool
Главная
База знаний
Псевдокласс empty в CSS. Полное руководство с примерами

Псевдокласс empty в CSS. Полное руководство с примерами

26 декабря 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