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?

No, the child div would also be hidden. Why would you want to do this? — Drewid, Aug 04 '11 at 09:55
I don't think you can do this in CSS alone. However, you can mange to do it with JavaScript. — Shef, Aug 04 '11 at 09:59
looking for something like 'if ( .parent AND .parent has .child ) hide this.parent ( not the other parent ) if that makes it more clear for you Drewid. preferably done in css or even add a class name if .parent has or does not has a child if that's gets you anywhere? — FLY, Aug 04 '11 at 11:07

score 31 · Answer 1 · answered Sep 09 '14 at 12:36

31

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.

answered Sep 09 '14 at 12:36

Bosken85

617
6
8

3

But `:empty` fails, if inside `.parent` is any text (including spaces or line breaks). – Setthase Feb 23 '16 at 09:50
3

@codename- it's not a failure of the empty selector because an element with even whitespace content is not empty. – activedecay Oct 10 '18 at 15:07
Thanks a lot! This is really fast. And it also works for elements containing sub-elements with text, if these are set to `display:none;` via CSS dynamically. – Stefan Jelkovich May 08 '22 at 21:09

score 9 · Accepted Answer · edited May 23 '17 at 10:29

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/

thnx. I've done some more research and also tried to do it in another way ( by hiding all parent items and then showing only the parents who have a child ) but i must conclude that you cannot use a css selector to select a parent item. you can only select the element itself or decedents. — FLY, Aug 04 '11 at 11:47

score 0 · Answer 3 · edited Feb 25 '23 at 22:53

0

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

edited Feb 25 '23 at 22:53

Zach Jensz

3,650
5
15
30

answered Feb 21 '23 at 14:02

Dimitri Hilverda

1

css hide div if div has no child with class

3 Answers3

Linked