Условное форматирование HTML+CSS?

Question

[Алексей]

Можно ли как то сделать "условное форматирование" как в экселе. Т.е. чтобы свойства элемента зависели от его содержания. Желательно без JS.
Для примера цвет числа завис от его значения.
Ну скажем
0 белый
1 красный
2 зеленый и тд

Comments

[Алекс Глебов]

подключаем jquery и используем
jquery.page2page.ru/index.php5/%D0%A1%D0%B5%D0%BB%...

[Pavel Karinin]

Алекс Глебов, автор пишет:

Желательно без JS

[fallen_trancer]

Вижу только один способ - с помощью атрибутов data-*:
Пример для rgb

[Алексей]

fallen_trancer, да, это уже ближе, только или все же не то или я не могу разобраться
htmlbook.ru/blog/atribut-data
Как с помощью этого можно решить поставленную задачу
0 белый
1 красный
2 зеленый и тд

Answer 1

[monochromer]

https://jsfiddle.net/9aqchcsf/1/

<div data-number="1"></div>
<div data-number="2"></div>
<div data-number="3"></div>

[data-number]::before {
  content: attr(data-number);
}

  [data-number="1"] { color: red; }
  [data-number="2"] { color: blue; }
  [data-number="3"] { color: green; }

Comments

[Алексей]

надо прописывать каждому значению отдельную "дату". А хочется несколько другого. Чтобы автоматически в зависимости от значения получался цвет

[monochromer]

тогда нужно придумывать некоторую зависимость, как здесь - число пробрасывается через JavaScript, но цвет вычисляется через CSS:
https://codepen.io/monochromer/pen/xREyry?editors=0110