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

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+1.0+9.5+3.1+1.0+1.0+2.0+

Коротка інформація

Застосовується доДо всіх елементів
Посилання на специфікаціюhttp://www.w3.org/TR/css3-selectors/#empty-pseudo

Версії CSS

CSS 1CSS 2CSS 2.1CSS 3

Опис

Псевдоклас :empty представляє порожні елементи, тобто ті, які не мають дочірніх елементів, тексту або пробілів. Наприклад, <p></p> є порожнім елементом, а <p> </p>, <p>&nbsp;</p> або <p>тест</p> вже не є.

Синтаксис

елемент:empty { ... }

Значення

Немає.

Приклад

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <title>порожній</title>
  <style>
   span:empty {
    background: red;
    padding: 3px;
    margin-left: 7px;
    display: inline-block;
   }
  </style>
 </head> 
 <body> 
  <p>Лінійна фактура, зокрема, ілюструє фузз, і тут ми бачимо 
  ту саму канонічну послідовність з різним напрямом кроку 
  окремих ланцюжків<span></span></p>
 </body> 
</html>

Результат цього прикладу в браузері Safari показаний на рис. 1.

Застосування псевдокласу :empty

Рис. 1. Застосування псевдокласу :empty

Часті запитання

  • Q: Як використовувати псевдоклас :empty в CSS?

    A: Використовується для вибору елементів, які не мають дочірніх елементів або текстового вмісту.

  • Q: Де можна використовувати псевдоклас :empty?

    A: Псевдоклас :empty можна використовувати у CSS-селекторах для вибору пустого вмісту елементів.

  • Q: Як відобразити елемент, якщо він має пустий вміст за допомогою :empty?

    A: Можна використовувати :empty у CSS для приховування або стилізації елементів, які не мають вмісту.

  • Q: Чи підтримує всі браузери псевдоклас :empty?

    A: Псевдоклас :empty підтримується усіма сучасними браузерами, але може бути проблемами з сумісністю у старих версіях IE.

  • Q: Які переваги можна отримати використовуючи псевдоклас :empty?

    A: Використання псевдокласу :empty дозволяє зручно обробляти елементи без вмісту або з пустим вмістом для стилізації або взаємодії.