В HTML есть очень хороший таг ol, создающий нумерованные списки, например
в результате отобразит
Однако, что же делать, если нужен список, пронумерованный в обратном порядке? Для таких вещей в CSS 2.1 были введены счетчики. Идея в том, что у любого элемента может быть указано CSS свойство counter-increment с указанием шага увеличения счетчика. Причем, согласно CSS стандарту можно указывать нулевой и отрицательный шаг.
Поэтому, к списку, приведенному выше, добавим класс, который и будем "мучить" стилями:
.decrement { counter-reset: item; /* item это просто название. Названием счетчика может быть любая строка, кроме зарезервированных 'none', 'inherit' и 'initial' \*/ } .decrement > li { list-style-type: none; /* Для элементов списка уберем стандартную нумерацию \*/ counter-increment: item -1; /* и сделаем нашу \*/ } .decrement > li:before { content: counter(item) ". "; }
Однако, результат будет ровно таким, каким его поняла машина:
Для того, чтобы все встало на свои места, необходимо указать начальное значение счетчика.
Так как, значение счетчика будет вначале "затронуто" самим LI элементом, то есть уменьшено на единицу, а потом уже выведено через li:before - установим его в кол-во пунктов плюс один
.decrement3 { counter-reset: item 4; }
Однако, это крайне не удобно, иметь начальное число в описании класса, ибо количество пунктов в списках может легко менятся.
Я пробовал найти способ автоматического выбора начального значения счетчика, исходя из количества пунктов списка, однако сделать это полностью через один стилевой файл так и не удалось. Решения тут два:
1. использовать встроенный стиль элемента (<ol style = 'counter-reset: item 4' />) для каждого такого списка.
2. использовать скрипт, которые после загрузки бы страницы ставил необходимое число (для jQuery: jQuery( ".decr" ).css( 'counter-reset', 'item ' + (jQuery( ".decr" ).children( "li" ).length + 1) );).
Плюсы и минусы - очевидны. В первом случае - нет скриптов, но необходимо не забывать менять стиль при изменении количества элементов, во втором - нумерация автоматическая, но есть скрипты.
Я же, пожалуй, буду использовать оба метода - так надежнее: для "куцых" терминалов (текстовых) будет срабатывать (я надеюсь) первый вариант на стилях, а если же когда-нибудь я забуду подправить, второй вариант таки будет подправлять меня на нормальных терминалах. Терминалы читай броузеры.