How to select 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 the 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> 

^{( JSFiddle )}

But that selects also the items (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 would allow you to specify that all/none of the ancestor elements must match certain critieria (ie not be a list), you would need xpath for that.

but what you can do is the following:

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

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

See MDN all for documentation on resetting styles. You can also selectively unset specific properties.

Answer 2

CSS

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

Answer 3

you need to identify your first ul:

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

then select it with ul.my-list>li

Answer 4

You can add a class to the <li> s which contain second-level content and then exclude them from the main CSS query using the :not pseudo-class

 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 5

What you have does work, you just need to style the inner li 's too, as their background by default is transparent.

Note though, that some properties are inherited by default and will be picked up by the inner li 's and needs to be set explicit, like the font color.

 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 6

in your case the problem is background-color , the color is only applied on .list>li but childrens show parent's background.

to separate color, you need to add element (for example div or 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>