24

Possible Duplicate:
Is there a CSS parent selector?

Is there a css selector I can use only if a child element exists?

Consider:

<div> <ul> <li></li> </ul> </div>

I would like to apply display:none to div only if it doesn't have at least one child <li> element.

Any selector I can use do this?

CalvT
  • 2,805
  • 6
  • 35
  • 49
Chaitanya
  • 2,238
  • 4
  • 26
  • 45

5 Answers5

25

Sort of, with :empty but it's limited.

Example: http://jsfiddle.net/Ky4dA/3/

Even text nodes will cause the parent to not be deemed empty, so a UL inside the DIV would keep the DIV from being matched.

<h1>Original</h1>
<div><ul><li>An item</li></ul></div>

<h1>No Children - Match</h1>
<div></div>

<h1>Has a Child - No Match</h1>
<div><ul></ul></div>

<h1>Has Text - No Match</h1>
<div>text</div>

DIV {
 background-color: red;
 height: 20px;    
}

DIV:empty {
 background-color: green;
}

Reference: http://www.w3.org/TR/selectors/#empty-pseudo

If you go the script route:

// pure JS solution
​var divs = document.getElementsByTagName("div");
for( var i = 0; i < divs.length; i++ ){
    if( divs[i].childNodes.length == 0 ){ // or whatever condition makes sense
        divs[i].style.display = "none";
    }        
}​

Of course, jQuery makes a task like this easier, but this one task isn't sufficient justification to include a whole libary.

Tim Medora
  • 51,363
  • 11
  • 111
  • 149
  • 1
    `:empty` will behave more naturally (and helpfully) in the future. Once browsers implement Selectors Level 4, `:empty` will represent "an element that has no children except, optionally, document white space characters." https://drafts.csswg.org/selectors-4/#the-empty-pseudo – mfluehr Jul 15 '19 at 20:53
19

Nope, unfortunately that's not possible with CSS selectors.

ThiefMaster
  • 285,213
  • 77
  • 557
  • 610
4

CSS does not (yet) have any parent rules unfortunately, the only way around it if you must apply it only parents that contain a specific child is with the Javascript, or more easily with a library of javascript called jQuery.

Javascript can be written in a similair way to CSS in someways, for your example we would do something like this at the bottom of our HTML page:

<script type="text/javascript">
     $('div:has(ul li)').css("color","red");
</script>

(For this you would need to include the jQuery library in your document, simply by putting the following in your <head></head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
Alexander Wigmore
  • 2,975
  • 4
  • 32
  • 57
  • i liked this one the most since it is very compact. I used it together with the not selector like: jQuery('.navbar-inner:not(:has(ul li))').css('display', 'none'); – Manuel Manhart Dec 19 '13 at 13:17
2

If you use jquery, you can try out this function

jQuery.fn.not_exists = function(){
    return this.length <= 0;
}

if ($("div#ID > li").not_exists()) {
    // Do something
}
Infinity
  • 3,055
  • 23
  • 35
2

There is another option

$('div ul').each(function(x,r) {
    if ($(r).find('li').length < 1){
        $(r).css('display','block'); // set display none
    }
})
Zach dev
  • 1,582
  • 7
  • 15