Different behaviour between ":last-child" and ":not(:last-child)"
nav :last-child includes your single<ul> element. Since there is only one, it is a :last-child. So it applies text-transform: uppercase; to all if its contents, in this case, all three <li> elements. It is also being applied to the last <li>, because it is also a :last-child. To see this more clearly, here is an example with two <ul> elements.
nav :last-child {
text-transform: uppercase;
}<nav>
<ul>
<li>This is not a last-child, and parent not a last-child</li>
<li>This is not a last-child, and parent not a last-child</li>
<li>Last-child of li in this section</li>
</ul>
<ul>
<li>Parent ul of these li's is a last-child</li>
<li>So all three li's</li>
<li>Are uppercase</li>
</ul>
</nav>nav li:last-child is specific to only li's, so it only styles the last <li>.
nav li:last-child {
text-transform: uppercase;
}<nav>
<ul>
<li>Only applies to li's</li>
<li>So ul has no style applied</li>
<li>But this li is a :last-child</li>
</ul>
<ul>
<li>Only applies to li's</li>
<li>So ul has no style applied</li>
<li>But this li is a :last-child</li>
</ul>
</nav>And finally, nav :not(:last-child) applies to anything that is :not a last-child.
nav :not(:last-child) {
text-transform: uppercase;
}<nav>
<ul>
<li>This ul is <b>not</b> a :last-child</li>
<li>So all of its content</li>
<li>will be uppercase</li>
</ul>
<ul>
<li>This ul <b>is</b> a :last-child</li>
<li>But these first two li's are not</li>
<li>So they are uppercase</li>
</ul>
</nav>