Target first level <li>s and not the nested <li>s
JqueryCssHtml ListsJquery Problem Overview
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,
Jquery Solutions
Solution 1 - Jquery
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 - Jquery
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 - Jquery
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 - Jquery
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.
Solution 5 - Jquery
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; }
Solution 6 - Jquery
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>