What is a child combinator?

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Descendent elements further down the hierarchy don't match.

ul > li {
    border-top: 5px solid red;
}
...
<ul>
    <li>This will have a border on top</li>
    <li>This will have a border on top
        <ol>
            <li>This will NOT have a border on top</li>
            <li>This will NOT have a border on top</li>
        </ol>
    </li>
</ul>

Source: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#child_combinator