CODEWITHSUNDEEP
css
FLY
FLY

Reputation: 2459

css hide div if div has no child with class

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?

Upvotes: 13

Views: 29490

Answers (4)

Naren
Naren

Reputation: 4470

If anyone's still exploring a CSS-only approach, consider this.

Note: This code directly checks if the parent element has any immediate children.

.parent:not(:has(:first-child)) {
    display: none;
}

Upvotes: 2

Dimitri Hilverda
Dimitri Hilverda

Reputation: 21

With the new :has() selector in CSS you could do this:

.parent {
  display: none;
}

.parent:has(.child) {
  display: block;
}

Note that as of writing it doesn't yet work in Firefox without enabling a flag

Upvotes: 2

Nivas
Nivas

Reputation: 18344

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/

Upvotes: 9

Bosken85
Bosken85

Reputation: 677

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.

Upvotes: 37

Related Questions