CSS :empty Selector

Samantha Ming on August 05, 2019

Often, we want to style elements that contain content. How about when an element has no children or text at all? Easy, you can use the :empty sel... [Read Full]
markdown guide
 

I love seeing little known features like this getting some spotlight! It's probably worth noting when the level 4 selectors roll out white space will be included as empty πŸ™‚.

The :empty pseudo-class represents an element that has no children except, optionally, document white space characters.

drafts.csswg.org/selectors-4/#the-...

 

Oh crazy! That’s a game changer! Let me add that to my notes, thank you for sharing πŸ˜ŠπŸ‘πŸ‘

 

I did not know. Thank you very much !

also :not and :empty can be used to hide empty state πŸ˜€

<style>
.alert:not(:empty) {
  background: pink;
  padding: 10px;
}
</style>
<div class="alert"></div>
<div class="alert">Alert Message</div>

Thanks!
Β 

 

Nice! that's an awesome application of it πŸ‘

 

I've used this recently within ul that show's a message when the ul has no children - the list was populated via JS.

 

It use to be that designers would had to hand this back to developers to fix this JS. Now we're empowering designers to make these fixes with just CSS. Pretty neat! (but JS developers should probably fix these empty population of these elements πŸ˜…)

 

I have forgotten about this because the browser support wasn’t ready a few years back. Glad to hear that it is making improving.

 

Support definitely has improved! And I'm happy that it did πŸ‘

 

I wasn't really aware there was a :empty pseudo-class, but I never went looking for it either.πŸ˜… I can think of a few instances in my applications where this will come in handy! Thanks for sharing!

 

YES! you're very welcome! and don't hesitate to jump back here to share with us your use-case, always cool to see how others apply this 😊

code of conduct - report abuse