I just bumped into this Kevin Powell's video and it blew my mind! 😱
😠 How many times did I have to use JavaScript to hide an HTML element just because it was empty?
😎 With the :empty pseudo class it became as simple as adding :empty to a selector!
#task-list:empty {
display:none;
}
This code means that the element with ID
task-listwill be hidden if it has no children. Children can be either element nodes or text (including whitespace!)
Demo
🧑🏻💻 As usual, I created a simple stackblitz project (a todo list app) to test this feature!
This is the basic structure:
and thanks to CSS :empty pseudo class, in case there's no tasks, I could easily move from this:
...to this!
How cool is that?! 😍
CSS is getting easier to use every day! In my opinion, studying it and keeping up to date with its new features can definitely make our work easier!
P.S. the funny thing is that :empty pseudo class is supported since Chrome 4 and IE9 😅
Top comments (0)