Target first level
s and not the nested
s

Question

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,

possible duplicate of [Selecting only first-level elements in jquery](http://stackoverflow.com/questions/977883/selecting-only-first-level-elements-in-jquery) — Felix Kling, Jan 28 '11 at 16:35

score 128 · Accepted Answer · edited May 16 '14 at 17:14

128

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.

edited May 16 '14 at 17:14

rick schott

21,012
5
52
81

answered Jan 28 '11 at 16:34

Spudley

166,037
39
233
307

1

Or without adding that container, use `body`: `$('body > ul > li').css('border', '1px solid red');` – ncuesta Jan 28 '11 at 16:37
1

Yes, this is the solution, and the same solution I came up with on my own. I selected this solution as the right answer because it doesn't need to use JavaScript to accomplish that, but I hadn't figured out it could be done with CSS only before posting the question. Thanks! – Ricardo Zea Jan 28 '11 at 16:57
3

Be aware that some CSS attributes may `inherit` so if you set the `.myclass > ul > li {font-size: 2em;}` then all your `li`s may still be affected unless you `.myclass li {font-size: 1em;}` as your default – Chris Beck Sep 09 '15 at 16:51

score 20 · Answer 2 · answered Jan 28 '11 at 16:32

20

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

answered Jan 28 '11 at 16:32

user113716

318,772
63
451
440

1

Your solution would only work if only one ´ul´ was used in the page and not if you would have several ´ul´s. Yet, your solution works nevertheless for this specific example. Thanks. – Ricardo Zea Jan 28 '11 at 16:52
@Ricardo: Do you mean because of the ID? Yes you're right, you'd need to use a class instead to target the first level `
` elements across several top level `

user113716

Jan 28 '11 at 16:54

As of Mar 2023, `:has()` is now [valid and mostly available CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:has#specifications), but your first solution selects `

`s of any level which do not contain `

`s.

– EvgenKo423 Mar 16 '23 at 12:50

score 11 · Answer 3 · edited Aug 27 '15 at 10:02

11

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.

edited Aug 27 '15 at 10:02

Flimm

136,138
45
251
267

answered Jan 28 '11 at 16:43

Ricardo Zea

10,053
13
76
79

That was my initial thought, too. It's hard to say if the OP needs some other (non-CSS) behavior too, that isn't captured in the hypothetical example. – typeof Jan 28 '11 at 16:51
looks as though your code has been applied to all elements in FF 17 – Jamie Hutber Dec 11 '12 at 11:46
@JamieHutber, The solution works on `:hover`. Here, I created a [more clear Demo](http://jsfiddle.net/aNcsD/166/) – Ricardo Zea Dec 11 '12 at 18:51
this one is what im problem was, very hard to understand why the bold is applied to the second level if you have just the first CSS `ul > li { font-weight: bold;}` – Seabizkit Jul 02 '17 at 11:49
@Seabizkit The font is bolded in all `li`s but since I only want the second-level `li`s bolded I have to "unbold" them by applying the second rule `ul > li li { font-weight: normal; }`. Makes sense? – Ricardo Zea Jul 02 '17 at 21:13
@RicardoZea i understand you have to do it! what i don't understand is `CLASS.UL > li` why does this targets all `li`'s hope that clears up my confusion. when you have specifically targeted fir li ONLY. – Seabizkit Jul 03 '17 at 09:50
@Seabizkit There's no class selector, I'm using an element selector. Plus `ul > li {…}` targets all first child `
`s in the document because we're using the child selector `>`, which really is the same thing as just doing `li {…}`, after all, all `li`s are first children anyway. The trick is in the second rule that negates what the first rule did. But you already knew that . Does that answer your question?

Ricardo Zea

Jul 03 '17 at 14:09

Mine has a class selector and still doesn't work. i.e. i can understand why `ul > li` on its own may not work but don't understand why `CLASS.UL > li` is not honored mmm maybe the correct thing I'm looking for is 'CLASS >UL > li' ill try that, that should work. then it would make sense. – Seabizkit Jul 03 '17 at 17:18

If I understood correctly, yes, you can just add a class to the `

` and target from there as `.class-name li {…}`. I also noticed that your syntax is incorrect: instead of `class.ul > li` it should be `ul.class > li`. I have a feeling that that's what's causing your issues. – Ricardo Zea Jul 04 '17 at 03:55

@Seabizkit Because of [this](https://stackoverflow.com/questions/4830624/target-first-level-lis-and-not-the-nested-lis#comment52831394_4830672). – EvgenKo423 Mar 15 '23 at 09:03

score 2 · Answer 4 · answered Jan 28 '11 at 16:36

2

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.

answered Jan 28 '11 at 16:36

detaylor

7,112
1
27
46

score 1 · Answer 5 · answered Jan 28 '11 at 16:48

1

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

answered Jan 28 '11 at 16:48

typeof

5,812
2
15
19

Yes, this is very good solution. However, I prefer not having to use jQuery (although at the moment of typing the question I hadn't figured out it could be done with CSS only). Gave you a vote though. – Ricardo Zea Jan 28 '11 at 16:55
Thanks. I wasn't sure if you wanted to do something else in javascript, or simply add CSS styles. The :hover pseudo class is definitely the way to go for just style changes. – typeof Jan 28 '11 at 21:26

score 1 · Answer 6 · answered Jul 10 '20 at 12:41

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>

score 0 · Answer 7 · answered Mar 16 '23 at 10:49

0

This can be done with either jQuery or CSS3 using :not() selector to check the parent of a list.
To prevent CSS properties from inheriting you could wrap an items' content with <span> or <div>.

:not(li) > ul > li > span {
  color: green;
}

<ul>
  <li><span>Level 1</span></li>
  <li><span>Level 1</span>
    <ul>
      <li><span>Level 2</span></li>
      <li><span>Level 2</span>
        <ul>
          <li><span>Level 3</span></li>
          <li><span>Level 3</span></li>
        </ul>
      </li>
      <li><span>Level 2</span></li>
    </ul>
  </li>
  <li><span>Level 1</span></li>
</ul>

Note that this method will only work if the elements are directly nested (i.e. when using a child combinator (>)), otherwise :not() will just always match a random ancestor.

answered Mar 16 '23 at 10:49

EvgenKo423

2,256
2
16
23

Thanks for your answer. Using jQuery/JS for this is possible but clearly not necessary. This is a CSS-only solution (I mentioned this in my edit :]). Now, using the `:not()` pseudo-class is an option but in my opinion it makes the solution too verbose, hence, a bit less scalable. One thing FOR SURE I would never recommend, is to use extra markup for the sake of targeting. TBH, seeing those `` s inside those list items makes me cringe ><, lol – Ricardo Zea Mar 16 '23 at 18:21
@RicardoZea Not sure what do you mean by "too verbose", but **it checks exactly for what is wanted without adding any extra classes**. The final selector looks quite verbose in this case, but **in my case I was checking for nested classes**, so it only added one more selector. As for extra markup, I don't like it as well, but you can't select bare text in CSS. That's what `` is for and your accepted answer also adds an extra `
`. On the other hand, **overriding styles for nested elements looks like a dirty hack to me and causes code duplication**.
– EvgenKo423 Mar 17 '23 at 08:19
@EvgeKo423 Seems you do know what “verbose” means. Your solution is verbose with the use of `:not(pseudo)` class and the `span` selector. ESPECIALLY, the `span` selector. I could get around using the `:not(pseudo)` class, but NOT a chance with using the `span`, **especially** in the HTML. The accepted solution uses a wrapper, that's **ONE** element, whereas your solutions **requires** a `` **IN EACH** `
`. That's also verbose. Overriding styles isn't pretty, but **it is not** a hack. Plus, it isn't a rare use of the principle. BTW, the accepted solution validates, a “hack” doesn't.

Ricardo Zea

Mar 17 '23 at 16:24

@RicardoZea OK, I've got your point. I just wanted to share my solution in general, I agree that it works not so well in this particular case. – EvgenKo423 Mar 18 '23 at 06:44

Target first level
s and not the nested
s

7 Answers7

Linked

Target first level s and not the nested s

7 Answers7

Linked

Target first level
s and not the nested
s