Target list items in primary ul but not nested ul

Question

I need to add css styles to parent list.

I have one parent ul and children. I want to apply color to fruits , vegetables and flowers but not Apple , Banana , Orange .

I want to do this using a CSS selector.

 ul:root>li { color: red; } 

 <ul> <li>Fruits <ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul> </li> <li>Vegetables</li> <li>Flowers</li> </ul> 

Answer 1

You could simply add a class to the parent ul and then use the direct descendant selector to target only those li items.

This is definitely going to change the colors for Apple or Orange but you can then reset the color on the sub ul items.

Here's your updated demo.

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

 <ul class="parent-list"> <li>Fruits <ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul> </li> <li>Vegetables</li> <li>Flowers</li> </ul> 

Answer 2

Use like this...

 <ul> <li>Fruits <ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul> </li> <li>Vegetables</li> <li>Flowers</li> </ul> <style> ul li{ color: red; } ul li li{ color: black; } </style> 

Answer 3

 ul > li { /* select list items that are children of a ul */ color: red; } ul ul li { /* select list items that are descendants of a ul, itself... */ color: black; /* ...a descendant of another ul */ } 

 <ul> <li>Fruits <ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul> </li> <li>Vegetables</li> <li>Flowers</li> </ul> 

Answer 4

<style>
ul  li {
  color: red;
}

ul ul li {
  color: black;
}
</ul>

</style>


<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
      <li>Orange</li>
    </ul>
  </li>

  <li>Vegetables</li>
  <li>Flowers</li>