CSS exact child selector

Question

I know that greater than (>) sign/slector will select exact child and not nested one

but in this example all <li> getting black BG

<div id="content">
  <ul>
    <li>List Item With ul
        <ul>
            <li>Sub list item</li>
            <li>Sub list item</li>
            <li>Sub list item</li>
        </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
</div>

CSS:

#content > ul li {
   background: black;
   color: white;
}

as per rule black BG shouldn't be for Sub list item but here its applied to all <li> (should be just for List Item With)

http://jsfiddle.net/4j1zv25b/

Answer 1

The greater than symbol (>) selects the direct child of the parent but grandchildren will still inherit from it.

To select the garndchild you would need ul li ul li or ul > li > ul > li

You can also use child selectors like:

:first-child
:nth-child(n)
:last-child

See more about CSS selectors here https://www.w3schools.com/cssref/css_selectors.asp

Answer 2

why dont you select the inner list items also

#content > ul li {background: black;
    color: white;}


#content > ul li li {
    background: white;
    color: black;
 }

Answer 3

The behaviour you've described is correct, because your asking the direct ul child of #content, to style it's Li's with that behaviour.

Just because you've given that Li some children, does not negate its effects. Because the children are within the scope of the original targeted Li, they will be styled according to their parent.

I've attached a potential variant that you may be looking for, which should style just the first li within the sub categories.

I've also attached another example, which might better illustrate my point. Imagine a Div, with another Div inside of it, and inside the child div, there is a paragraph tag.

If you style the direct child of the first div, you would expect the paragraph tag to still have a black background, because it's parent is the targeted div. The p doesn't apply opposite styling to compensate, because why would it?

#content>ul li {
  background: black;
  color: white;
}

#desired>ul li ul li:first-child {
  background: black;
  color: white;
}

#example > div {
background: black;
color: white;
}

<div id="content">
  <ul>
    <li>List Item With ul
      <ul>
        <li>Sub list item</li>
        <li>Sub list item</li>
        <li>Sub list item</li>
      </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
</div>

<div id="desired">
  <ul>
    <li>List Item With ul
      <ul>
        <li>Sub list item</li>
        <li>Sub list item</li>
        <li>Sub list item</li>
      </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
</div>

<div id="example">
  <div>
    <p>Still styled</p>
  </div>
</div>

Answer 4

Your current code selects any li within the first level ul. The child list li tags are still descendants of the first ul so get styled. You need to also use select the direct descendant of the ul:

#content > ul > li {
   background: black;
   color: white;
}

However, you also have the issue that all child lists are inside of that styled li. The child elements don't have a background or color set so the background is transparent and the color is inherited. You need to apply a new background and color to override those styles.

#content>ul>li {
  background: black;
  color: white;
}

#content li li {
  background: white;
  color: black;
}

<div id="content">
  <ul>
    <li>List Item With ul
      <ul>
        <li>Sub list item</li>
        <li>Sub list item</li>
        <li>Sub list item</li>
      </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
</div>