CODEWITHSUNDEEP
csscss-selectors
Judd Cobler
Judd Cobler

Reputation: 21

CSS Select Non Recursive li's Only

How can I style only the top level li's from this example list?

<ul class='upper'>
  <li class="first">dog</li>
   <li>cat</li>
   <li>bird</li>
   <li>mouse</li>
   <li>
     <ul class="lower">
        <li>chow</li>
        <li>nibz</li>
        <li>seed</li>
        <li>cheese</li>
     </ul>
  </li>


ul.upper > li {
  color:red;
}

This styles all li's which I understand because the recursive UL is inside a first level list item. Is there a simple way to style only the top level li's though? Maybe using ":not" in some way?

Edit: I realize you can overwrite the style below it using color:initial or by adding another color(and other ways) but I was wondering if there was a way to ONLY select the top level li's nicely so another style isn't needed.

Upvotes: 1

Views: 3153

Answers (3)

annieXo
annieXo

Reputation: 156

You can define the deeply nested UL's list-items like this:

ul > li {
  color:red;
} 

ul ul > li {
  color: #000;
}

So this can work throughout your page to identify any top-level list-items versus second-level list-items, regardless of class name. "ul ul" in CSS means "ul that is inside another ul"

Working example: https://jsfiddle.net/2Lyvp2bm/2

(I'm new, how do I add a code snippet to my answer?)

Upvotes: 0

The Process
The Process

Reputation: 5953

So, your li are inheriting color from their ancestors, so you need to add color:initial, or color:black to override that

ul.upper > li {
  color: red;
}
li {
  color: initial;
}
<ul class='upper'>
  <li class="first">dog</li>
  <li>cat</li>
  <li>bird</li>
  <li>mouse</li>
  <li>
    <ul class="lower">
      <li>chow</li>
      <li>nibz</li>
      <li>seed</li>
      <li>cheese</li>
    </ul>
  </li>

Upvotes: 3

Rodrigo C
Rodrigo C

Reputation: 151

You want the child combinator, ">"

.upper > li

Upvotes: 2

Related Questions