Search code examples
cssclassselector

.nav > li OR .nav li to style all lists inside .nav class

Which is the correct selector to select all li items inside .nav class ?

Have tried both and they seem to both work. Want to know what the correct way of writing the selector

Trying to style all list items inside .nav class. I know its a basic question but all sites say something different

Solution

  • It depends on what you mean by selecting all childs:

    • .nav li: This is called Decendand combinator, which selects all li that has an ancestor with class .nav, no matter if there are intermediate layers between.
    • .nav > li: This is called Child combinator, which only selects the immediate child elements under.nav. (For example, .nav > ol > li won't be selected)

    .nav li {
  color: red;
}

.nav>li {
  color: blue;
}
    <div class="nav">

  <li>Direct Child</li>
  
  <ol>
    <li>Not Direct Child</li>
  </ol>
  
</div>