Q:

CSS exact child selector

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/

A:

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>

