• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Inhaltsabhängiger CSS selector

C

Change

Neues Mitglied
Hallo,

ich kenne die verschiednenen Arten der Selektoren, ich bräuchte nun folgende Lösung.

<span class="" alt="16650">Die Ausgabe</span>

Nun soll die Farbe des Textes dem Attribut entsprechend gesetzt werden

Grau wenn alt <= 0
Blau wenn alt >= 10000
Rot wenn alt >= 15000
Grün wenn alt >= 20000

Gibt es eine Möglichkeit dies mit selektoren zu regeln? Würde gerne auf JS verzichten :)

Vielen Dank im Voraus
 
Mir wäre da derzeit kein Weg bekannt , es besteht zwar die Möglichkeit gezielt bestimmte Werte anzusprechen(=), aber Logik wie größer und kleiner einzubauen, geht meines Wissens (noch?) nicht :)

Edit: Ich vermute ja mal das es hier um eine größere Datenmenge geht, wo kommen diese denn her, evtl kannst du das ja serverseitig erledigen lassen ;)
 
Zuletzt bearbeitet:
Vielleicht darf man das ja so machen.
Code: 
<html>

<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
body {
background:#000;
}
span[data-color^="-"] , span[data-color^="0"] { color: grey}
span[data-color^="1"] { color: red}
span[data-color^="2"] { color: blue}
span[data-color^="3"] { color: green}

span[data-color^="35"] ,
span[data-color^="36"] ,
span[data-color^="37"] ,
span[data-color^="38"] ,
span[data-color^="39"] { color: yellow}
</style>
</head>

<body>
<span data-color="-1">grau</span>
<span data-color="0">grau</span>
<span data-color="10000">rot</span>
<span data-color="39999">gelb</span>
<span data-color="20000">blau</span>
<span data-color="29999">blau</span>
<span data-color="30000">grün</span>
<span data-color="35000">gelb</span>
<span data-color="35999">gelb</span>
<span data-color="37000">gelb</span>
<span data-color="19999">rot</span>
</body>
</html>
 
Zuletzt bearbeitet:
djheke schrieb:
Aber nur, wenn es keine Zahlen von 1 bis 9999 gibt. Sonst wird's zur Strafarbeit.:confused:
Zum Vergrößern anklicken....

Nicht unbedingt. Man könnte ein Sass Mixin schreiben, welches die 10.000 CSS-Selektoren automatisch generiert. Aber es wäre natürlich völliger Unfug, das Stylesheet so aufzublähen, zumal ja tatsächlich nur 4 Klassen gebraucht werden. Der bessere Ansatz wäre eine Variable innerhalb des Class-Attributs und eine Funktion im Controller, welche den Wert des Data-Attributs ausliest und die Variable entsprechend belegt.

Auch wenn es jetzt nicht direkt zur Lösung obiger Aufgabe beiträgt, möchte ich in dem Zusammenhang noch ergänzen, dass sich mit Angular per ng-class sogar Expressions auswerten lassen. Folgender Code:

HTML: 
<div class="foo" ng-class="{bar: myFunction()}"></div

würde die CSS-Klasse bar nur dann hinzufügen, wenn myFunction() true zurückliefert.
 
Naja der TE meldet sich sowieso nicht mehr (wohl doch nicht so wichtig) und außerdem verstehe ich nicht warum irgendwelche Zahlenwerte als Attribut eingefügt werden sollen. Besser ist eine Serverseitige Abfrage und gut is.
 
Ist richtig, das Data-Attribut wird nicht benötigt. Aber die Funktion im Controller, welche analog zum Zahlenwert des jeweiligen Datensatzes eine CSS-Klasse erzeugt und diese anschließend im View rendert, brauchst du schon.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben