:empty CSS Pseudo Class


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.


element:empty { … } 


<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

Explorer Edge Chrome Firefox Opera Safari
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung

Last updated by CSSPortal on: 25th November 2019