Objasnění zápisu v CSS

To číslo neudává pořadí UL elementů, ale potomků NAV.

Nerozumím, můžeš prosím objasnit?

Pokud je 4. potomek elementu NAV element UL, tak nastaví ten styl.

A co myslíš tím potomek?

Element uvnitř jiného elementu.

Můžeš mi v tom kódu prosím očíslovat ty potomky? Pokud vycházíme z toho, že NAV je rodič.

<NAV>
      <DIV>
            <H1></H1>
            <UL>
                  <LI></LI>
                  <LI></LI>
                  <LI></LI>
            </UL>
            <H1></H1>
            <UL>
                  <LI></LI>
                  <LI></LI>
                  <LI></LI>
            </UL>
      </DIV>
</NAV>

<NAV>
      <DIV> <!-- 1 -->
            <H1></H1>  <!-- 1 -->
            <UL>  <!-- 2 -->
                  <LI></LI>  <!-- 1 -->
                  <LI></LI> <!-- 2 -->
                  <LI></LI> <!-- 3 -->
            </UL>
            <H1></H1> <!-- 3 -->
            <UL>   <!-- 4 -->
                  <LI></LI> <!-- 1 -->
                  <LI></LI> <!-- 2 -->
                  <LI></LI> <!-- 3 -->
            </UL>
      </DIV>
</NAV>

Je tam selektor NAV UL, takže nemusí jít o přímého potomka. Na rozdíl od selektoru NAV > UL.

Díky moc za objasnění.
Správně by to tedy mělo být takto?

nav>div>ul:nth-child(4) { border: solid 10px red; }

Správně je to, čeho chceš dosáhnout. Nedá se říct, že jeden zápis je špatně a druhý dobře.

No chci nastylovat pouze ten druhý seznam (UL).

<NAV>
<DIV> <!-- 1 -->
<H1></H1> <!-- 1 -->
<UL> <!-- 2 -->
<LI></LI> <!-- 1 -->
<LI></LI> <!-- 2 -->
<LI></LI> <!-- 3 -->
</UL>
<H1></H1> <!-- 3 -->
<UL> <!-- 4 -->
<LI></LI> <!-- 1 -->
<LI></LI> <!-- 2 -->
<LI></LI> <!-- 3 -->
</UL>
</DIV>
</NAV>

V tom případě spíš chceš nth-of-type místo nth-child.

Uf, tak tedy takto?

nav>div>ul:nth-of-type(2) { color:red; }

Třeba tak.

Tak jestli to jde napsat líp, rád se přiučím

Jak jsem psal. Vždycky záleží na tom, co přesně chceš udělat. Pokud chceš vybrat druhé UL, které je přímým potomkem DIVu, který je přímým potomkem NAVu, tak je to správně.

Super, velmi děkuji za tvůj čas.

Osobně bych volil class nebo id pro prvek ul. Pokud někdy za čas vsuneš další ul, budeš muset přepsat i css.
Zvlášť pokud by stránku mohlo měnit víc lidí - osobní zkušenost.