Target first level s and not the nested s

Question

I have the following HTML:

  
A
    

      
subsection
    
  
  
B
    <         


        

Answer 1

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')

Answer 2

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.

Answer 3

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.

Answer 4

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>

Answer 5

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.

Answer 6

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; }