CODEWITHSUNDEEP
htmlcss
StephenMeehan
StephenMeehan

Reputation: 1113

Trying to understand Child combinator in CSS

I want to style just the first level of li, it looks like a child combinator should work, but as the demo below shows every li is red. I would expect only the first level (not nested) li to be styled red.

What am I doing wrong?

.list > li {
  color: red;
  border: 1px solid orange;
  list-style: none;
}
<ul class="list">
  <li>1st level</li>
  <li>1st level</li>
  <li>1st level
      <ul>
          <li>2nd level</li>
          <li>2nd level</li>
          <li>2nd level</li>
          <li>2nd level</li>
          <li>2nd level</li>
      </ul>
  </li>
  <li>1st level</li>
  <li>1st level</li>
</ul>

Upvotes: 2

Views: 159

Answers (3)

Sushma Yadav
Sushma Yadav

Reputation: 1

#outer-list > li {
  color: red;
}
#inner-list > li {
  color: black;
}
<ul id="outer-list">
  <li>1st level</li>
  <li>1st level</li>
  <li>1st level
      <ul id="inner-list">
          <li>2nd level</li>
          <li>2nd level</li>
          <li>2nd level</li>
          <li>2nd level</li>
          <li>2nd level</li>
      </ul>
  </li>
  <li>1st level</li>
  <li>1st level</li>
</ul>

Upvotes: -3

Tyler Roper
Tyler Roper

Reputation: 21672

Your selector will style "Any <li> element that is a direct child of a <ul> element", which stands true for all of your <li> elements.

You could override all inner <ul> elements by doing ul ul > li and setting them back to black instead.

ul > li { color: red; }
ul ul > li { color: black; }
<ul>
  <li>1st level</li>
  <li>1st level</li>
  <li>1st level
      <ul>
          <li>2nd level</li>
          <li>2nd level</li>
          <li>2nd level</li>
          <li>2nd level</li>
          <li>2nd level</li>
      </ul>
  </li>
  <li>1st level</li>
  <li>1st level</li>
</ul>

Upvotes: 1

Quentin
Quentin

Reputation: 943548

The ul selector matches the <ul> on line 1 of your code and the <ul> on line 5 of your code.

Diagram of child relationships

You'd need something more specific to make ul match only the one on line 1 (e.g. :not(li) > ul > li) … but even then, the default value of the color property is inherit not black, so the colour would still be copied from the parent element even though the selector wouldn't cause the rule to match it.

So you'd need to explicitly set the color of the nested element:

ul > li { color: red; }
ul > li li { color: black; }

Upvotes: 5

Related Questions