: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 | |||||
 |
 |
 |
 |
 |
 |
| 9 | 12 | 1 | 1 | 9.5 | 3.1 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| 2 | 18 | 4 | 10.1 | 2 | 1.0 |
Last updated by CSSPortal on: 25th November 2019
Share this Page
If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.
URL