Как я недавно узнал, в HTML5 вы можете использовать атрибут value с элементами списка, если они находятся внутри упорядоченного списка. http://dev.w3.org/html5/markup/li.html
Я пытаюсь создать элементы списка по их значению. Желательно, чтобы я хотел их стиль:
li[value >= "10"] { background: orange; }
li[value >= "20"] { background: green; }
Однако в настоящее время это невозможно с помощью только CSS.
Вот скрипка, с которой я играл, пробую разные вещи. http://jsfiddle.net/Hf57v/2/
HTML:
<ol>
<li value="33"></li>
<li value="4"></li>
<li value="12"></li>
<li value="88"></li>
<li value="jadfk"></li>
</ol>
CSS
li { width: 20px; height: 20px; margin: 20px; background: gray; }
li[value~="3"] { background: orange; } /* #1 */
li[value="4"] { background: red; } /* #2 */
li[value="12"] { background: blue; } /* #3 */
li[value^="1"] { background: green; } /* #4 */
li[value^="8"] { background: yellow; } /* #5 */
li[value="NaN"] { background: pink; } /* #6 */
1) Это не работает при создании фона оранжевого цвета для <li value="33"></li>.
Я думал, что с тех пор, как он содержит 3.
2) Это работает при изменении <li value="4"></li> на красный.
3) Это работает при изменении <li value="12"></li> на синий.
4) Это переопределяет синий фон <li value="12"></li> и меняет фон на зеленый. Я думал, что это может быть не так, поскольку ="12 более конкретный, чем ^="1" (начинается с 1).
5) Это работает при изменении <li value="88"></li> на желтый.
6) Это не работает при создании фона для <li value="jadfk"></li>. Я попробовал это, так как значение должно быть числом, поэтому, если это просто строка/текст, он возвращает NaN (а не число).
Также, как работает ol, есть ли значение для li, или значение NaN, тогда li принимает значение из предыдущего li. В скрипте <li value="jadfk"></li> отображается как 89. Но даже если он отображается как 89. Он не подчиняется li[value^="8"] { background: yellow; }, как это делает 88.. Интересно, почему это так.
Главный вопрос: есть ли способ нацеливать значение li на > или < операторов в CSS?
Следующий вопрос: если ответ отрицательный, то есть ли какие-либо хаки или селектор, которые я не включил, которые помогают одновременно перенаправлять больше элементов списка по их значению атрибута значения?
Информация о Bounty:
Ссылка на бонусы jsfiddle http://jsfiddle.net/tuDBL/
В скрипте я создал упорядоченный список (ol), который содержит 130 элементов списка (li), значения которых от 0 до 129. li со значениями от 0 до 9 должны иметь уникальный цвет фона. li со значениями от 10-19 должен иметь уникальный цвет фона. Etc и т.д., Вплоть до 129. Таким образом, в конце будут 12 уникальные цвета фона, и каждый из них будет представлять 10 последовательных значений li. Победителем награды будет, скорее всего, человек, способный сделать это с минимальным количеством допустимых CSS.