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,
Solution 1:
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.
Solution 2:
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')
Solution 3:
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.
Solution 4:
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.