CSS :empty Pseudo Class

The CSS :empty pseudo-class selects the elements that do not have any child element 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

Selectors Level 3

Selectors Level 4

In Selectors Level 4, the :empty pseudo-class was changed to act like :-moz-only-whitespace, but currently it is not supported by any browser.

Syntax

:empty {
  css declarations;
}

Example of the :empty selector with the <p> tag:

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

Try it Yourself »

Example of the :empty selector with the <div> tag:

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