How to select only top-level li in recursive menu?

Question

How do I select only first-level li's? If I do 'ul li', it also selects the children. Is there a way to select only the top level and not the children using CSS? If not, I am ok with using jQuery, but how would I select it in that case too?

<ul>
    <li class="administration first">
        <a href="/administration.aspx"><span>Administration</span></a>
        <ul>
            <li class="users first selected"><a href="/administration/users.aspx"><span>Users</span></a></li>
            <li class="forms last"><a href="/administration/forms.aspx"><span>Forms</span></a></li>
        </ul>
        <div style="clear: both;"></div>
    </li>
    <li class="analytics"><a href="/analytics.aspx"><span>Analytics</span></a></li>
    <li class="options"><a href="/options.aspx"><span>Options</span></a></li>
    <li class="system last"><a href="/system.aspx"><span>System</span></a></li>
</ul>

Answer 1

If your ul has a class or ID, you can do something like this:

$('#myList > li')

Answer 2

The jQuery selector syntax for parent/child is:

$('ul > li')

The child combinator (E > F) can be thought of as a more specific form of the descendant combinator (E F) in that it selects only first-level descendants.

With the structure you have, you may need to specify the ul parent element as well.

Answer 3

You would need the element or class which is above the first ul, then specify {parent-selector} > ul > li.

Answer 4

Hi,

A quick fix, if possible would be to add a class name on the outer ul and select with $('ul.myClassName > li').

Another option: $('ul > li:has(ul)') it will give you all but the last nesting level.

Answer 5

$(".analytics:parent > li")

Will work for this specific case, but you are better off giving the top level a class or id.

Something like:

$("#top-level-ul > li")

Seems easier to follow than having to select the parent of one of your lis

Answer 6

$('ul li:first')

Answer 7

$("ul:first > li").