A new feature on my website allows users to dynamically add list items (<li>) to a list container (<ul>). I want the list container style to change when there are no list items present.
<ul class="con">
</ul>
ul.con:not(:has(> li)) {
background-color: #cccccc;
border: 3px solid #000000 !important;
}
Even after applying the CSS rule, the background color of the list container doesn't change when there are zero list items. How can I correctly utilize the :has() selector or any other method to style the list container when it lacks list items? Please note that the :empty selector isn't effective due to whitespace within the list container.