:empty CSS pseudo-class – practical use

Often times we have a situation where we have to style elements differently when there is no child element. So there is a feedback message for users for a good user experience. The message can simply show the state of the situation or motivate the user to perform certain actions. For this, we can use :empty CSS pseudo-class.

The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). There is no need to create an if-else statement and add a class to the empty element to style it via CSS just use :blank pseudo selector and style it any way you like.

---

Live Demo:

I have implemented it in one of the tools I created i.e. bulk image resizer and compressor tool. So when there is nothing to download in the download files section a cartoon cat with a message shows up. This message automatically goes away where there is something to download. So try compressing some images from your local and observe the download section.

Open demo in a new tab – https://tools.webdevpuneet.com/bulk-image-compressor/

You can also use this I used here for the demo to bulk resize and compress your images to make them lighter in size for faster websites and web-pages.

CSS Code I used

#outresult:empty {
    background: url(https://tools.webdevpuneet.com/bulk-image-compressor/images/cat-attendent.jpg) no-repeat center center;
    min-height: 327px;
    background-size: contain;
}

I hope this made it clear now where the :blank CSS can be practically used which can save a lot of hard code development time.