[Go Make Things] The :empty pseudo-class in CSS

By rahmat hidayat

Friday, January 10, 2025

​ One of my favorite not-so-new aspects of CSS is the :empty pseudo-class. You can use this to target elements that have no children—either child elements or whitespace and text nodes—and style them differently than they would be otherwise. For example, imagine you have some CSS to layout items in a row using flexbox… .grid-flex { display: flex; gap: 1rem; } .grid-flex > div { background-color: #ffdc00; border: 1px solid #665800; color: #665800; padding: 1rem 2rem; text-align: center; } And a row of items generated from an API or database or something. Since you don't know the content ahead of time, it's possible that one of the items may have no content in it, like the fourth <div> the .grid-flex container below… <div class="grid-flex"> <div>1</div> <div>234567890</div> <div>abc</div> <div></div> <div>def</div> </div> That empty div gets displayed in the UI just like the others: a big yellow, empty box. Here's a demo. In situations like this, you can use the :empty pseudo-class to hide elements that might not have any content, but could end up in the UI when they shouldn't. .grid-flex > div:empty { display: none; } Now, the empty yellow box is hidden in the UI. Here's another demo. A lot of developers will reach for JavaScript DOM manipulation for stuff like this. But CSS provides a simpler, easier, and less error-prone way to handle the same thing. Like this? A Lean Web Club membership is the best way to support my work and help me create more free content. Cheers, Chris ​ Want to share this with others or read it later? View it in a browser.​ ​

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

Share :

Facebook Twitter Google+