Everything you need to know about css :empty selector.

CSS selector :empty is used to target empty elements or you can say like elements which don't have contents inside it.

There are many a times when we give padding and margin to certain elements like a paragraph tag <p> hello </p>. Let's suppose that particular tag gets some dynamic loaded data into it. There will be situation where there will not data and <p> </p> tag will still contain those styling in it.
In that case :empty selector comes into play.

Example:

.content p:empty {
padding: 0;
margin: 0;
}

this styling will be applied to that <p> tag which has no content inside it.

or

.content p:not(:empty) {
padding: 15px;
margin: 15px;
}

this styling will be applied to that all <p> tag inside .content which but not to empty elements;