css hide div if div has no child with class

Question

Is it possible to hide a div with css if the div has no child div's with a specific class name?

<div class="parent">
 This div must be hidden
</div>

<div class="parent">
 This div must be visible
 <div class="child">
 child div
 </div>
</div>

If it's not possible with CSS, maybe with javascript or jQuery?

Answer 1

Since of CSS3 you can use the :empty selector. This method is widely supported by all modern browsers and is much faster than it's javascript alternative.

Answer 2

I don't think this is possible with just CSS, but it is definitely possible with Javascript.

You have to
- find all divs with class parent
- find all those with a child div with class child
- if there is no such child, set style.display = none

Now, with pure javascript this can be a bit complicated. You can use the getElementsByClassName from this question and then apply the above logic:

//getElementsByClassName from @CMS's answer to the linked question
var parentDivs = getElementsByClassName(document, "parent"); 
for(var i=0; i<parentDivs.length; i++)
{
    var children = getElementsByClassName(parentDivs[i], "child");
    if(!children || children.length == 0)
    {
        parentDivs[i].style.display = "none";
    }
}

With jQuery, this is lot more simple:

$(".parent").each(function()
{
    if($(this).children(".child").length == 0)
    {
        $(this).hide();
    }
});

Live Example: http://jsfiddle.net/nivas/JWa9r/