Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

:empty

Псевдокласс CSS :empty используется для задания стиля пустым HTML-элементам, то есть элементам, которые не имеют никакого содержимого, причем неважно могут у них быть открывающие (начальные) и закрывающие (конечные) теги или нет. Но надо понимать, что если между тегами элемента имеется только обычный пробел или перевод строки, то он уже не является пустым.

Тип псевдокласса

Назначение: псевдоклассы.

Применяется: ко всем элементам.

Значения

Нет.

Синтаксис

селектор:empty {  }

Пример CSS: использование :empty

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS псевдокласс :empty</title>
  <style type="text/css">
  p {
   width: 200px; /* ширина параграфов */
   height: 30px; /* их высота */
   background: red; /* красный фон */
  }
  p:empty {
   background: green; /* зеленый фон пустых параграфов */
  }
  hr:empty {
   width: 200px; /* ширина линии */
   height: 10px; /* ее высота */
   background: blue; /* синий цвет */
  }
  </style>
 </head>
 <body>
  <p>Этот параграф не пустой.</p>
  <p></p> <!-- А этот - пустой. -->
  <hr>
 </body>
</html>

Результат примера

Результат. Использование псевдокласса CSS empty.

Использование псевдокласса CSS empty

В данном примере псевдокласс :empty использовался и для горизонтальной линии, хотя это было излишним, так как элемент <HR> вообще не может иметь закрывающего тега, а соответственно и содержимого.

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетНетНетДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:До 9.09.0 и выше2.0 и выше2.0 и выше9.29.6 и выше3.1 и выше
Поддержка:НетДаДаДаНетДаДа