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-list
will 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)