Псевдокласс CSS :empty

Псевдокласс CSS :empty выбирает элементы, у которых нет дочерних элементов или текстового содержимого.

Псевдоэлементы ::before и ::after не влияют на пустоту элемента, даже если они находятся внутри него.

Если закрывающий тег сразу следует за открывающим, такой элемент считается пустым.

Самозакрывающиеся элементы, такие как <hr />, <br /> и <img />, считаются пустыми и будут соответствовать селектору :empty.

Версия

Selectors Level 3

Selectors Level 4

INFO

Selectors Level 4 сохраняет для :empty то же поведение, что и Level 3, сопоставляя только элементы, у которых абсолютно нет дочерних элементов.

Синтаксис

Пример синтаксиса CSS :empty

css

:empty {
  css declarations;
}

Пример селектора :empty с тегом `<p>`:

Пример кода CSS :empty

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:empty {
        width: 200px;
        height: 30px;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:empty selector example</h2>
    <p>Lorem ipsum is simply dummy text...</p>
    <p></p>
    <p>Lorem ipsum is simply dummy text...</p>
  </body>
</html>

Try it Yourself »

Пример селектора :empty с тегом `<div>`:

Ещё один пример кода CSS :empty

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div:empty {
        background-color: #ccc;
        padding: 15px;
        width: 50%;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>:empty selector example</h2>
    <p>
      Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
    <div></div>
    <p>
      Lorem Ipsum is simply dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </body>
</html>

Try it Yourself »

Практика

Что представляет собой псевдокласс :empty в CSS?

Воздействует на элементы без дочерних элементов (включая текстовые узлы).Воздействует на элементы с текстовым содержимым в верхнем регистре.Фильтр для удаления пустых элементов из DOM.Воздействует на элементы без текстового содержимого.

Псевдокласс CSS :empty ​

Версия ​

Синтаксис ​

Пример селектора :empty с тегом <p>: ​