I have a div
with a header element and a ul
in which I load li
items:
<div class="listContainer">
<header>Title</header>
<ul class="list">
<li>Test Element</li>
<li>Test Element</li>
<li>Test Element</li>
</ul>
</div>
In this case the whole .listContainer
needs to be visible.
But is it possible to hide the whole container with the CSS :empty
selector, if .list
is empty, like this:
<div class="listContainer">
<header>Title</header>
<ul class="list">
</ul>
</div>
Right now I'm using the :empty
selector to hide the ul
, but the whole .listContainer
needs to be hidden.
.list:empty { display: none; }
I know that it is possible with JavaScript, but in this case I need to do it with CSS alone, but I am not sure if this is possible.
See Question&Answers more detail:os