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

I have the following HTML:

<ul>
  <li>A
    <ul>
      <li>subsection</li>
    </ul>
  </li>
  <li>B
    <ul>
      <li>subsection</li>
    </ul>
  </li>
  <li>C
    <ul>
      <li>subsection</li>
    </ul>
  </li>
</ul>

With jQuery, how do I target the FIRST level of <li>s?

For example, I need to make the font bold on hover to the <li>s with the letters A, B and C, but NOT have that font style applied to the nested <li>s开发者_StackOverflow中文版 (with the name subsections).

Here's an initial jsfiddle DEMO if you'd like to use it.

Thanks.

EDIT--

Solution:

CHILD SELECTORS, that's the answer.

No need for jQuery, this can be done using CSS.

Here's the updated DEMO

EDIT-- Here's a more clear demo

Thanks,

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.

I would set one rule to target all li elements and then another to override this that targets nested li elements.

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

Nested li elements would be normal weight and top level would be bold.

I don't think your problem has been completely addressed (although there has been some good attempts). Your example problem deals with applying a style to a parent and preventing the child from inheriting the style -- which is a CSS problem.

You could target the list items by knowing the parent element (as some have noted). Then add a class on hover.

$('div > ul > li').hover(function(){
    $(this).addClass('myHover');
},
function(){
    $(this).removeClass('myHover');
});

And your CSS would have the class for the parent, and a negating style for the children:

.myHover { font-weight: bold; }
.myHover li { font-weight: normal; }

Here is an extended version of user @Spudley's answer - with a snippet.

Might save some people some time.

/* this will affect all levels of li */
.myclass ul li {
  color: red;
}


/* this will only affect level 1 */
.myclass>ul>li {
  color: green;
}


/* this will only affect level 2 */
.myclass>ul>li>ul>li {
  color: blue;
}


/* this will only affect level 3 */
.myclass>ul>li>ul>li>ul>li {
  color: aqua;
}


* {
  font-family: arial;
}

<div class="myclass">
  <ul>
    <li>Level 1
      <ul>
        <li>Level 2
          <ul>
            <li>Level 3</li>
            <li>Level 3</li>
          </ul>
        </li>
        <li>Level 2</li>
        <li>Level 2
          <ul>
            <li>Level 3</li>
            <li>Level 3</li>
            <li>Level 3
              <ul>
                <li>Level 4</li>
                <li>Level 4</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Level 1</li>
  </ul>
</div>