Target first level <li>s and not the nested <li>s

Have a container <div> with a class, and use the > selector. Lets say your container div's class is "myclass":

.myclass ul li {
   ...this will affect both levels of li.
}

.myclass > ul > li {
   ...this will only affect the first level.
}

.myclass > ul > li > ul > li {
   ...this will only affect the second level.
}

Note: the > selector does not work in IE6 and below when used as a CSS selector. It does work in all other browsers though, including IE7 and IE8, and when used in JQuery, it works in all browsers supported by jQuery, including IE6.

You could do this:

$('ul > li:not(:has(ul))');

But it would be better to give your top level <ul> an ID so you can target it with a valid CSS selector:

$('#topUL > li')

CHILD SELECTORS, that's the answer.

No need for jQuery, this can be done using CSS. Target the first-level li elements with a selector:

ul > li {
    font-weight: bold;
}

And then undo the styling for deeper li elements:

ul > li li {
    font-weight: normal;
}

Here's the updated DEMO.