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