[CSS] Zwei Klassen gleichzeitig? [Archiv] - PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr

Archiv verlassen und diese Seite im Standarddesign anzeigen :
[CSS] Zwei Klassen gleichzeitig?

mrhappiness

18-11-2005, 09:27

Folgendes Problem:

<div class="level1">Punkt 1
<div class="level2">Punkt 1.1</div>
</div>
<div class="level1 selected">Punkt 2
<div class="level2">Punkt 2.1</div>
<div class="level2 selected">Punkt 2.2</div>
<div class="level2">Punkt 2.3</div>
</div>Das ist das vorgegebene - unabänderliche - HTML.

Selektierte Punkte (inklusive Hierarchie) bekommen als zusätzliche CSS-Klasse also selected zugewiesen.

Ich soll jetzt dafür sorgen, dass selektierte Punkte auf Ebene 1 rot hinterlegt sind, selektierte Punkte auf Ebene 2 grün.

.selected {
background:red;
}geht logischerweise nicht, da auch Ebene 2 rot hinterlegt würde

.selected {
background:red;
}

.selected .selected {
background:#0f0;
}geht auch nicht und.selected {
background:red;
}

."level2 selected" {
background:#0f0;
}geht auch nicht.

Wie kann ich es anstellen, dass es im IE 6 so aussieht wie gewünscht?

TBT

18-11-2005, 10:12

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.selected { background-color: #f00; }
.selected div { background-color: #fff; }
.selected .selected { background-color: #0f0; }
</style>
</head>
<body>
<div class="level1">Punkt 1
<div class="level2">Punkt 1.1</div>
</div>
<div class="level1 selected">Punkt 2
<div class="level2">Punkt 2.1</div>
<div class="level2 selected">Punkt 2.2</div>
<div class="level2">Punkt 2.3</div>
</div>
</body>
</html>

mrhappiness

18-11-2005, 10:44

Danke, das hatte ich schon probiert.

Da dein Beispiel aber wie gewünscht funktioniert, hab ich mir mein HTML nochmal angeschaut und das sieht nicht so aus wie oben (hab da zu logisch gelayoutdenkt/nicht genau genug hingesehen) gepostet, sondern so:<div class="level1">Punkt 1</div>
<div class="level2">Punkt 1.1</div>
<div class="level1 selected">Punkt 2</div>
<div class="level2">Punkt 2.1</div>
<div class="level2 selected">Punkt 2.2</div>
<div class="level2">Punkt 2.3</div>Hast du dafür, jetzt wo alle Elemente auf der gleichen Stufe im Dokumentenbaum stehen, auch eine Idee?

TBT

18-11-2005, 11:24

kram, kram, buddel, wühl in der Zauberkiste

trara!

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.level1.selected { background-color: #f00; }
.level2.selected { background-color: #0f0; }
</style>
</head>
<body>
<div class="level1">Punkt 1</div>
<div class="level2">Punkt 1.1</div>
<div class="level1 selected">Punkt 2</div>
<div class="level2">Punkt 2.1</div>
<div class="level2 selected">Punkt 2.2</div>
<div class="level2">Punkt 2.3</div>
</body>
</html>

aber leider nicht IE tauglich, beidem sind beide Einträge grün :(
Netscape Mozilla Firefox Konqueror zeigen das gewünschte Ergebniss ( Punkt 2 ist rot - Punkt 2.2 ist grün )

Kropff

18-11-2005, 11:37

warum arbeitest du bei sowas eigentlich nicht mit listen?

gruß
peter

TBT

18-11-2005, 11:43

Original geschrieben von Kropff
warum arbeitest du bei sowas eigentlich nicht mit listen?

gruß
peter

mrhappiness
Das ist das vorgegebene - unabänderliche - HTML.

mrhappiness

18-11-2005, 11:49

@Kropff
TBTs Aussage ist nichts mehr hinzuzufügen außerEnjoy SAP