Hiding a list with no items in CSS

The Artemis reading interface consists of a section tag for each day for which there are blog posts to show. Each section contains a h2 denoting the date the posts were published, and a ul that lists each post published on that date.Here is what the interface looks like:ALTThe Artemis interface showing three posts, one published on May 26th and two published on May 25th.There are some niche scenarios where a list may end up with no items but still retain the heading (and, as I later discovered, some practical scenarios too).This got me thinking: could I write a CSS rule that would hide an entire section if the list in the section had no child li elements? I first looked at the :empty CSS psuedo-class (MDN docs for :empty), but :empty is sensitive to white-space. If a ul had no child elements but a single space between its opening and closing tags, :empty would not apply.With that said, with the :has selector I can achieve the effect I want!I ended up with the following…