child selector

This shows how the child combinator is used. This fiddle enables you to experiment with out this is different from the descendant combinator.

HTML

<ol id="curtin" class="list">
    <li> CBS </li>
    <ul>
        <li>Information Systems</li>
        <li>Marketing</li>
    </ul>
    <li> Health Science </li>
        <ul>
           <li>Nursing</li>
           <li>Nutrition</li>
        </ul>
</ol>

<ol id="food"  class="list">
    <li> Vegetables </li>
    <ul>
           <li> carrots </li>
           <li> peas </li>
    </ul>
    <li> Fruit </li>
    <ul>
        <li> pears </li>
        <li> apples </li>
    </ul>
</ol>

CSS

li>li {
    background-color: pink;
    color: black;
}
    
/* Try to predict what will happen with the following changes:
 *  1. Replace the child  (">") with the descendant (" ") combinator
 *  2. Replace #curtin with .list
 */