CSS empty selector

In this article, we will discuss CSS, empty selectors. The empty selector selects only which HTML element has no content. Developers use this selector in some rare cases.

Syntax:

selector : empty
{
declaration list;
}

Here, the empty selector selects any HTML element targeted by the selector, if it is an empty element(has no content).

Example:
CSS:

p:empty{
border: 2px solid black;
width: 40%;
}

HTML:

<p>Hello Everyone</p>
<p></p>

Output:

See, the above code, we have created two <p> tags. One is empty and another has some text.
In CSS, we select p element then using empty psedo selector like “p:empty”.
Inside it we have set 2px border. see the output, the border is set only the empty <p> tag.