DEV Community 👩‍💻👨‍💻

Jyotishman Saikia
Jyotishman Saikia

Posted on

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.


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

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


.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;

Top comments (0)

Stop sifting through your feed.

Find the content you want to see.

Change your feed algorithm by adjusting your experience level and give weights to the tags you follow.