Setting DIV to displayif it contains a UL list that does not contains any LI items
I am designing a WordPress theme and have this problem : The sidebar has some DIV containers which all have one UL list. But one of these UL lists has no LI items. Now I want to hide the DIV container that has this UL list without LI items.
I was trying this, but it failed to work:
.wrapper > aside > div > div:not(h3 ul li) {display:none;}<br />
Example code:
<div class="wrapper">
<aside class="sidebar" role="complementary">
<div class="sidebar-widget">
<div id="recent-comments-2" class="widget_recent_comments">
<h3>Recent Comments</h3>
<ul id="recentcomments"></ul>
</div>
</div>
</aside>
</div>
Solutions
You can do it through
PHP code
or if you want a much simpler approach, then use jQuery. It would check that if the
UL
has
li
as its children with this function
.hasChildren()
. Thus it will turn it into
display:block
, otherwise
display:none