CSS :empty Pseudo Class

The :empty CSS pseudo-class selects the elements that do not have any child elements or text content.

The ::before and ::after pseudo-elements do not affect the emptiness of an element, even if they exist inside the element.

If another tag directly follows the open tag, then it is considered empty.

Self-closing elements such as <hr />, <br />, and <img /> are considered empty and will match the :empty selector.

Version

CSS3

Syntax

:empty {
css declarations;
}

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of thee 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>

Another example with :empty pseudo-class:

Example

<!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>

Browser support

4.0+ 12.0+ 3.5+ 3.2+ 10.0+

Practice Your Knowledge

Which statement is not correct about CSS :empty pseudo class?




Related articles