:empty CSS Pseudo Class

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The :empty pseudo-class is a CSS selector that targets elements with no child elements or text content. In other words, it selects elements that have no visible content inside them. This can be useful for applying styles or making adjustments to elements when they have no content, such as hiding empty containers or adding decorative elements when content is absent.

Here's an example of how you might use the :empty pseudo-class in CSS:

/* Select and style empty <div> elements */

div:empty {

  border: 2px dashed red;

  padding: 10px;

  text-align: center;

  background-color: lightyellow;

}

In this example, any <div> element with no content will have a dashed red border, padding, centered text, and a light yellow background applied to it.

Syntax

:empty {
  /* ... */
}

Example

HTML

<p>At the end of this sentence, we will have an empty span tag plus a span tag with a space in it, by using the :empty pseudo class and with some css applied, you will be able to see the effect. The :empty span will be red, while the other span will have a green border.<span></span><span> </span></p>

CSS

span {

   border: 1px solid green;

   padding: 3px; 

   margin-left: 7px; 

   display: inline-block; 

}   

span:empty { 

   background: red; 

   border: 1px solid red;

   padding: 3px; 

   margin-left: 7px; 

   display: inline-block; 

}

Result

Editor