Question

Possible Duplicate:
Is there a CSS parent selector?
CSS selector for “foo that contains bar”?

I have a set of nested unordered lists, and I want to be able to style just the <li> parent items that have children. The html look something like this:

<ul>
    <li>item one</li>
    <li>item two</li>
    <li>item three
        <ul>
            <li>child item</li>
        </ul>
    </li
</ul>

I want to be able to add a background image, i.e., to ONLY “item three”. What’s the easiest way to do this?

Answer 1

I’d use jQuery to loop through the UL and find LI elements with UL children. Like so maybe?:

<style type="text/css">
    .newClass {
        background: #059;
    }
</style>

<script>

$(document).ready(function() {
    $('#mainUL li').each(function(i) {
        if ($(this).children('ul').length > 0) {
            $(this).addClass('newClass');
        }
    });
});

</script>

<ul id="mainUL">
    <li>item one</li>
    <li>item two</li>
    <li>item three
        <ul>
            <li>child item</li>
        </ul>
    </li>
</ul>