Elternelement abhängig vom Kind formatieren

[Sven]

Guten Tag,

ich möchte in einer verschachtelten Liste das Elternelement abhängig vom Kind formatieren. Ist das irgendwie möglich?

Hier das konkretere Beispiel:

<ul>  
  <li class="active">1  
    <ul>  
      <li class="active">1.1</li>  
      <li>1.2</li>  
    </ul>  
  </li>  
  <li class="active">2  
     <ul>  
       <li>2.1</li>  
       <li>2.2</li>  
     </ul>  
  </li>  
  <li>3  
     <ul>  
       <li>3.1</li>  
       <li>3.2</li>  
     </ul>  
   </li>  
</ul>

Das Ziel ist nun, dass folgende Texte rot dargestellt werden: 1.1, 2

Es sollen also in Wörtern formuliert alle Texte rot dargestellt werden, die die class "active" haben und keine (!) Ebene unter ihnen, die ebenfalls die class active behält.

Bisher ist mein Umsetzungsversuch:

  
#ul li {  
  color: black;  
}  
#ul li.active {  
  color: red;  
}  
#ul li.active ul li {  
  color: black;  
}  
#ul li ul li.active {  
  color: red;  
}

Das erste färbt erstmal alle schwarz. Das zweite macht alle li mit der class "active" rot, dass dritte hebt die Vererbung auf, dass vierte macht auch auf der Unterebene die li rot, wenn sie die class "active" haben.

Das Problem ist nun, wie kriege ich auf der ersten Ebene das rot weg, wenn eines der Kinderelemente auch die class "active" hat? Also Beispiel 1, dass bisher noch rot wäre.
Es ist technisch leider nicht möglich in diesem Fall die class "active" einfach für Beispiel 1 nicht zu setzen.

Gibt es dafür überhaupt eine Möglichkeit oder ist das schlicht mit CSS nicht möglich?

Viele Grüße