Question

Given the following unorderd, nested list structure:

<ul id="nestedList">
    <li>
        Item A
        <ul>
            <li>Item A Descrip</li>
        </ul>
    </li>
    <li>
        Item B
        <ul>
            <li>Item B Descrip</li>
        </ul>
    </li>
    <li>
        Item C
        <ul>
            <li>Item C Descrip</li>
        </ul>
    </li>
</ul>

What jQuery selector do I need to use to only style the top-level li elements (Item A, Item B, etc) and not the “Descrip” li elements?

I tried working with the .children() selector, which the jQuery documentation says only selects the immediate children of the selected element, but everything I tried either styled the entire list or only the second level li elements.

Here’s the jQuery I was working with:

$('#nestedList').children().css('font-weight', 'bold');

and:

$('ul#nestedList').children().css('font-weight', 'bold');

UPDATE
I created a jsFiddle for this, so feel free to mess with that…

Answer 1

“but everything I tried either styled the entire list”

This is because your styles placed on the top level are being inherited from the styles of the top level.

You need to override those styles on the nested lists.

$('#nestedList').children().css('font-weight', 'bold')
                .find('li').css('font-weight','normal');

Working example: http://jsfiddle.net/w66rK/