Verschachtelte HTML Elemente mit CSS formatieren

[the stell]

Hi,

ich hab in meiner Page eine ziemlich verschachtelte HMTL Struktur und möchte die einzelnen Elemente gerne mit CSS ansprechen.
Bis zu einer gewissen Ebene funktionierts auch prächtig aber irgendwann klappts dann nimmer.
Hier die Beispielstruktur:

<div id="navbar">
<ul>
  <li><a id="aktiv">Angeklickter Menüpunkt</a></li>
  <li><a id="nichtaktiv">Menüpunkt</a></li>
  <li><a id="locked">gesperrter Menüpunkt</a></li>
</ul>
</div>

aber das nächste z.B. leider nicht mehr

#navbar li active {
  color:#FF0000;
}

#navbar li locked {
  color:#CCCCCC;
}

hi,
du hast anscheinend das richtige Zeichen zum vor den Namen der Pseudoklasse bzw. der ID setzen vergessen:

 #navbar li :active {  
   color:#FF0000;  
 }  
  
 #navbar li #locked {  
   color:#CCCCCC;  
 }

Wenn du konsequent bleiben willst, dann schreib auch noch das Element vor den Doppelpunkt bzw. das Gatterzeichen. Notwendig ist das aber ned.

lg the stell