Anzeige

 2 Background-color, 2 class, 1 div


Sprint

Erfahrenes Mitglied
#1
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
 

Sempervivum

Erfahrenes Mitglied
#4
Also das zweite, nicht wahr? Links grün, rechts rot oder diagonal? Auch das ist sicher mit einem Farbverlauf und geeigneten Breakpoints realisiert?
 

Sprint

Erfahrenes Mitglied
#5
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%);
}
 

Sempervivum

Erfahrenes Mitglied
#6
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%);
}
 

Sprint

Erfahrenes Mitglied
#7
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.
 

Sempervivum

Erfahrenes Mitglied
#8
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?
 

Sprint

Erfahrenes Mitglied
#9
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.
 

Sempervivum

Erfahrenes Mitglied
#10
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.
 

Sprint

Erfahrenes Mitglied
#11
Die beiden Varianten sind nachvollziehbar. Aber ersteres ist mir klar und wird auch so verwendet und zweiteres habe ich noch nie verwendet. Es muß also was anderes gewesen sein. Aber ich weiß es echt nicht mehr, wo ich das das letzte Mal hatte. Ist jetzt aber auch egal. Mach dir deswegen keinen Kopf. ;)
 

basti1012

Erfahrenes Mitglied
#12
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?
Ich hatte das auch schon öffters ,das es nicht lief.
zb.
Code:
div #id  a{
}
ging erst wenn ich es so gemacht habe
Code:
div>#id>a{
}
Selbst das a mit einer id ansprechen ging da auch nicht.
Das wahr jetzt nur Beispiel, was es genau wahr id oder class .Das weiß ich nicht mehr.
Sobald mir sowas wieder passiert werde ich dir mal zeigen
 
Anzeige

Neue Beiträge

Anzeige