:empty CSS Pseudo Class

Description

The :empty pseudo-class represents empty elements, in other words, those that do not contain children, text, spaces or line breaks. For example, <p></p> is an empty element, but <p> </p>, <p>   </p> or <p> 123 </p> is not considered empty.

Syntax

element:empty { … } 

Example

<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>
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;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
912119.53.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
218410.13.1X