Liste mit css formatieren

[MasteR ChieF]

Hallo Community

Ich schlage mich wiedereinmal mit CSS herum (zur Info: Design ist nicht meine stärke =)

Ich habe eine Liste, welche dynamisch generiert wird. Sprich: jedes Listenelement könnte theoretisch beliebig viele Unterlemente haben.

Nun habe ich 2 verschiedene klassen

.area
.item

welche ich separat formatiere, was auch kein Problem ist.
Wenn ich aber ein Element ausgewählt habe, bekommt dieses eine weitere Klasse

.selected

Dann könnte eine KLassenangabe folgendermassen aussehen:

<li class='area selected'>INHALT</li>

Das Problem nun ist: wenn ich die .selected Klasse formatiere, haben alle unterelemente auch dieses Format, was ich nicht möchte.

.selected a
{
    color: Red;
}

Wenn ein Element, welches selektiert ist, Unterelemente hat, erscheinen alle in Roter Farbe. Wie kann ich das verhindern?? HOffe ihr versteht was ich meine :mrgreen:

Danke und Gruss
Master CHief

 

[koslowski]

Hi,

Du könntest die Unterelemente per Nachfahrenselektor ansprechen:

<ul>
    <li>
      <ul>
        <li></li>
      </ul>
    </li>
</ul>
</ul>

CSS:

ul li  {
    color:red;
}
ul li ul li  {
   color: halbgrün; 
}

da bräuchtest du keine Klassen.
Bei Klassen mußt du a weng wegen der Spezifität aufpassen.

 

[MasteR ChieF]

Danke für deine Antwort.

Aber ich weis nicht wie ich das genau so lösen soll, ich bin schon auch auf diese Idee gekommen.

Aber da ich die Liste dynamisch generiere (anhand einer DB), könnte die Liste theoretisch unendlich lang sein.

Dann funktioniert das obige System nicht. Ich will ja NUR einen einzigen Eintrag markieren. Und diesen muss ich irgendwie klassifizieren, damit das CSS "weiss" welcher markier ist.

Danke und Gruss

 

[aJunkie]

Formatiere .selected und überschreibe die Eigenschaften für die danach folgenden Menüpunkte.

.selected a
{
    color: Red;
}

.selected a:hover {
color: blue; /* Überschreibt red */
}