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

[Der Martin]

Hallo,

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

"irgendwie" vielleicht schon; mit CSS direkt aber nicht. Eine Selektierung eines Elements anhand seines Inhalt oder seiner Kindelemente ist nicht vorgesehen.

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.

Es geht nicht: Sobald du ein Kindelement im Selektor mit angibst, selektierst du auch eben dieses Kindelement.

#ul li {

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

  

> Es ist technisch leider nicht möglich in diesem Fall die class "active" einfach für Beispiel 1 nicht zu setzen.  
  
Was heißt "technisch nicht möglich"? Es ist deine einzige Möglichkeit, an genau dem Element anzusetzen, dessen Formatierung du bestimmen möchtest. Bei deinem Anliegen (Formatierung anhand bestimmter Kindelemente) wirst du vermutlich mit Javascript die Kindknoten untersuchen und abhängig davon eine zusätzliche (oder abweichende) Klasse setzen müssen.  
  
Ciao,  
 Martin  

-- 
"So schnell waren wir noch nie am Unfallort", sagte der Polizist zu seinem Kollegen, als er einen Laternenmast gerammt hatte.