2 Background-color, 2 class, 1 div

Sprint

Erfahrenes Mitglied
Hallo zusammen,

ich stehe hier gerade vor dem Problem, einem Div zwei verschiedene Hintergrundfarben geben zu müssen. Das ist prinzipiell kein Problem, wenn die in einer Class zusammengefaßt sind. Nun ist es bei mir aber so, daß die beiden Farben unterschiedliche Zustände eines Elements darstellen und nicht nur gemeinsam, sondern auch einzeln vorkommen können. Da die Farben teilweise per Ajax/JS gesetzt werden, wäre es natürlich am einfachsten, wenn die beiden Farben über separate Klassen ein- bzw. ausgeschaltet werden könnten. Wenn ich aber beide Klassen eintrage, wird immer nur die zweite verwertet.

Vielleicht wird es so noch klarer, was ich meine:
HTML:
<!-- Ist-Zustand -->
<div id="a" class="rot"></div>    <!-- rot eingefärbt -->
<div id="b" class="gruen"></div>    <!-- grün eingefärbt -->
<div id="c" class="rotgruen"></div>    <!-- rot und grün eingefärbt -->
<div id="d" class="rot gruen"></div>    <!-- grün eingefärbt -->
<!-- wünschenswert -->
<div id="a" class="rot"></div>    <!-- rot eingefärbt -->
<div id="b" class="gruen"></div>    <!-- grün eingefärbt -->
<div id="d" class="rot gruen"></div>    <!-- rot und grün eingefärbt -->
Gibt es einen Trick, mit dem ich die beiden Farben auf zwei verschiedene Klassen aufteilen kann und trotzdem beide verwendet werden? Die jetzt noch existierende Klasse "rotgruen" stellt den Zustand zwar richtig dar, ist aber verdammt kompliziert zu ermitteln. Darum sollte die möglichst wegfallen.

Danke schon mal im Voraus,
Sprint
 
Also das zweite, nicht wahr? Links grün, rechts rot oder diagonal? Auch das ist sicher mit einem Farbverlauf und geeigneten Breakpoints realisiert?
 
Also das zweite, nicht wahr? Links grün, rechts rot oder diagonal? Auch das ist sicher mit einem Farbverlauf und geeigneten Breakpoints realisiert?
Richtig. das hier sind z.B. die beiden diagonalen Farbverläufe:
CSS:
.hwm1 {
    background: linear-gradient(135deg, rgba(66,151,255,1) 0%,rgba(66,151,255,1) 49%,rgba(66,151,255,0) 50%);
}
.hwm2 {
    background: linear-gradient(135deg, rgba(71, 167, 39, 0) 50%,rgba(71, 167, 39,1) 51%,rgba(71, 167, 39,1) 100%);
}
 
Wäre dies eine Mögichkeit?:
Code:
div.rot.gruen {
    background: linear-gradient(135deg, rgba(66,151,255,1) 0%,rgba(66,151,255,1) 49%,rgba(66,151,255,0) 50%);
}
 
Perfekt, genau das ist es! Vielen Dank für die Hilfe.

Dazu aber noch eine Frage. Gibt es eigentlich ein Tutorial o.ä., wann bei einer CSS Anweisung der Elementepfad mit angegeben werden muß und wann nicht? Mal reicht es, in der CSS Datei eine Klasse zu definieren und sie wird in jedem noch so tief gestaffelten Konstrukt gefunden und manchmal muß der komplette Pfad mit sämtlichen Elementen davor angegeben werden, damit die Anweisung greift. Ich hab da noch kein System dahinter entdeckt, das aber bestimmt existiert.
 
Tutorial kenne ich nicht aber mir ist nicht bekannt, dass der Elementpfad angegeben werden muss, um eine Klasse zu finden. Gibt man nur die Klasse im Selektor an, wird/werden sie gefunden, egal wie tief im Baum sie liegen. Hast Du mal ein Beispiel wo es nicht greift?
 
Nein, auf die Schnelle leider nicht. Wenn wieder mal so ein Fall auftaucht, werde ich eine neue Anfrage stellen. Danke nochmal für deine Hilfe.
 
Ich kann mir zwei Möglichkeiten vorstellen:
1. Man will ein Element gezielt ansprechen, z. B. wenn die selbe Klasse mehrfach vorkommt und man nur das Element in div#a ansprechen will.
2. Man will von einem Pseudoelement wie :hover aus ein anderes ansprechen. Dann muss man den Weg im Dom angeben.
 
Zurück