CSS Select Non Recursive li's Only - css

Question

How can I style only the top level li's from this example list?
<ul class='upper'>
<li class="first">dog</li>
<li>cat</li>
<li>bird</li>
<li>mouse</li>
<li>
<ul class="lower">
<li>chow</li>
<li>nibz</li>
<li>seed</li>
<li>cheese</li>
</ul>
</li>
ul.upper > li {
color:red;
}
This styles all li's which I understand because the recursive UL is inside a first level list item. Is there a simple way to style only the top level li's though? Maybe using ":not" in some way?
Edit: I realize you can overwrite the style below it using color:initial or by adding another color(and other ways) but I was wondering if there was a way to ONLY select the top level li's nicely so another style isn't needed.

Answer 1

So, your li are inheriting color from their ancestors, so you need to add color:initial, or color:black to override that
ul.upper > li {
color: red;
}
li {
color: initial;
}
<ul class='upper'>
<li class="first">dog</li>
<li>cat</li>
<li>bird</li>
<li>mouse</li>
<li>
<ul class="lower">
<li>chow</li>
<li>nibz</li>
<li>seed</li>
<li>cheese</li>
</ul>
</li>

Answer 2

You want the child combinator, ">"
.upper > li

Answer 3

You can define the deeply nested UL's list-items like this:
ul > li {
color:red;
}
ul ul > li {
color: #000;
}
So this can work throughout your page to identify any top-level list-items versus second-level list-items, regardless of class name. "ul ul" in CSS means "ul that is inside another ul"
Working example: https://jsfiddle.net/2Lyvp2bm/2
(I'm new, how do I add a code snippet to my answer?)