33

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
  • 3,123
  • 6
  • 37
  • 54
Chaitanya
  • 2,396
  • 4
  • 29
  • 45

5 Answers5

32

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 M.
  • 53,671
  • 14
  • 120
  • 163
  • 2
    `: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
22

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

ThiefMaster
  • 310,957
  • 84
  • 592
  • 636
5

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
  • 3,157
  • 4
  • 38
  • 60
  • 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,695
  • 2
  • 27
  • 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,610
  • 8
  • 15