The **`:empty` pseudo-class** selects the selector element with no elements or text node (including whitespace).

# Syntax 

```
selector:empty{
  background-color: pink;
}
```
---
# Example for empty elements 

Here are some of the cases where an element is considered empty: 

* No content between element tags
```
<p></p>
```

* Only comments between the element tag

```
<p></p>
```

# Example for non-empty elements

Here are some of the cases where an element is considered empty: 

* Having any text node or element node inside the element

```
<p>Non-empty</p>

<p>
  <span> non-empty</span>
</p>
```

* Having a space between the tags

```
<p>  </p>
```

```
<p>
  
</p>
```

<html>
 <head>
 </head>
 <body>
   <h4> We have set pink background for empty blocks & deeppink background for non-empty blocks</h4>
   <h4>  </h4>
   <div></div>
   <div></div>
   <div>Non-empty</div>
   <div>
     <span>Non-Empty</span>
    </div>
    <div>  </div>
    <div>
      
    </div>
 </body>
</html>

div{
    width: 150px;
    height: 30px;
    color: white;
    background-color: deeppink;
    margin: 10px;
    text-align: center;
    line-height: 30px;
}

div:empty{
    background-color: pink;
}

codemirror

In the above code, we have set a *pink* background for empty blocks and a *deeppink* background for non-empty blocks using the `:empty`  pseudo-class. 

What is the :empty pseudo-class in CSS?

Syntax

Example for empty elements

Example for non-empty elements