CSS :empty Pseudo Class

The CSS :empty pseudo-class selects 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 a closing 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

INFO

Selectors Level 4 maintains the same behavior for :empty as Level 3, matching only elements with absolutely no children.

Syntax

CSS :empty syntax example

css

:empty {
  css declarations;
}

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

CSS :empty example code

html

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

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

CSS :empty another code example

html

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

Practice

What does the :empty pseudo-class in CSS represent?

Affects elements with no children (including text nodes).Affects elements with uppercase text content.A filter for removing empty elements from the DOM.Affects elements with no text content.

CSS :empty Pseudo Class ​

Version ​

Syntax ​

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