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 the open tag is directly followed by another 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 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>
    <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>



Related articles