How to choose the first level of children (li) from ul

Question

Given the following structure, I want to select the first level of children (li) from the list (ul), but not a nested list.

ul.list > li {
  background-color: red;
}

<ul id="list" class="list">
   <li>first level</li>
   <li>first level</li>
   <li>
      <h1></h1>       
      <div>
         <ul>
            <li>second level</li>
            <li>second level</li>
         </ul>
      </div>
   </li>
   <li></li>
</ul>

Run code

^{( JSFiddle )}

But it also selects the elements (li) inside the div.

I want to select the first level of children (li) using only ONE css RULE . How?

Answer 1

css does not have a selector that allows you to specify that all / none of the ancestor elements must meet certain criteria (i.e. not be a list), for this you need xpath.

but you can do the following:

ul > li {
  // top level list item styles here
}

li ul > li {
  all: initial;
  // nested item styles here
}

. MDN all . unset .

Answer 2

CSS

ul li div ul li { 
  /* Your styles here to override parent (if they are over 70% the same) */ 
}

Answer 3

<li>, , CSS, :not

ul.list > li:not(.level2) {
  background-color: red;
}

<ul class="list">
   <li>first level</li>
   <li>first level</li>
   
   <li class="level2"> first level with nested content
      <h1>some title</h1>       
      <div>
         <ul>
            <li>second level</li>
            <li>second level</li>
         </ul>
      </div>
   </li>
   
   <li>first level</li>
</ul>

Answer 4

, li, .

, li , , .

ul.list > li li {
  background-color: black;
}

ul.list > li {
  background-color: red;
  color: blue;
}


ul.list2 > li li {
  background-color: black;
  color: yellow;
}

ul.list2 > li {
  background-color: red;
  color: blue;
}

<div>Sample 1</div>

<ul id="list" class="list">
   <li>first level</li>
   <li>first level</li>
   <li>
      <h1></h1>       
      <div>
         <ul>
            <li>second level</li>
            <li>second level</li>
         </ul>
      </div>
   </li>
   <li></li>
</ul>

<hr>
<div>Sample 2</div>

<ul id="list2" class="list2">
   <li>first level</li>
   <li>first level</li>
   <li>
      <h1></h1>       
      <div>
         <ul>
            <li>second level</li>
            <li>second level</li>
         </ul>
      </div>
   </li>
   <li></li>
</ul>

Answer 5

:

<ul class="my-list">
   <li></li>
   <li></li>
   <li>
      <h1></h1>       
      <div>
         <ul>
            <li></li>
            <li></li>
         </ul>
      </div>
   </li>
   <li></li>
</ul>

ul.my-list>li

Answer 6

in your case, the problem is background-color, the color only applies to .list>li, but the children show the parent background.

to highlight a color you need to add an element (e.g., divor span)

.list>li>span{
  background-color: red;
}

<ul id="list" class="list">
   <li><span>first level</span></li>
   <li><span>first level</span></li>
   <li>
      <h1></h1>       
      <div>
         <ul>
            <li>second level</li>
            <li>second level</li>
         </ul>
      </div>
   </li>
   <li></li>
</ul>

Run code