Ricardo Zea Ricardo Zea - 6 months ago 13
jQuery Question

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 (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,

Answer

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.