Нумерация и автоматические счетчики в CSS.

Что такое счетчики в CSS?

Чтобы понять что такое счетчики в каскадных таблицах стилей достаточно вспомнить упорядоченные списки в HTML, нумерация элементов списка как раз используют счетчики, каждый раз увеличивая на единицу. CSS позволяет намного больше, например в HTML не рекомендуется управлять(использовать атрибут type) типами нумерации сисков, то стили предоставляют этих типов в 2-3раза больше, вдобавок при помощи CSS сщетчики можно установить любому элементу(тегу) и выводить номера при помощи генерируемого содержимого.

Как работают счетчики в таблицах стилей?

Контролировать нумерацию в щетчиках можно при помощи двух свойств правил counter-reset и counter-increment.

Что такое counter-increment?

Правило counter-increment служит для увеличения измерения счетчика на заданую еденицу.
LI:before {
content: counter(name) // мы присваиваем имя сщетчику
"разделитель"; // устанавливаем разделитель
counter-increment: name; // увеличиваем счетчик на единицу
}
Имя счетчика может быть произвольное(буквено-цифровым), разделитель должен быть в кавычках например ") ". По умолчанию нумрация цифрами, при не обходимости можно изменить тип(list-style-type): counter(name, list-style-type). Что касается counter-increment, значением его устанавливается имя счетчика которого нужно увеличить, сначала счетчик увеличивается а уже потом увеличивается. По умолчанию значение увеличивается на единицу, но при необходимости умолчания можно изменить и задать ноль, положительное или отрицательное число, например counter-increment: name 2; будет умеличивать счетчик на 2, т.е. не 1,2,3,... , а 2, 4, 6...
Полностью рабочая сторока:
LI:before{
content: counter(item, upper-alpha) ") ";
counter-increment: item 1
}

Что такое counter-reset?

Правило counter-reset случит для сброса счетчиков.
OL { counter-reset: name } //принимает в качестве значения имя счетчика, которого нужно сбросить.
По умолчанию счетчики сбрасываются до нуля, но если вам нужно чтобы у счетчика была другая точка отсщета, то это делается так:
OL { counter-reset: name 2 } //точка отсщета будет 2.
Эсли вам нужно сбросить несколько счетчиков то вот такой вариант не правильный:
OL { counter-reset: name1 0 }
OL { counter-reset: name2 4 }
OL { counter-reset: name3 7 }
В этом случае сбросится только последний счетчик, потому что в данном случае происходит каскадирование(второе правило отменяет первое, а третье отменяет второе).
Чтобы сбросить все три счетчика правильное правило:
OL { counter-reset: name1 0 name2 4 name3 7 }

Синтаксис правил для counter-reset и counter-increment

Правила для списков:
OL { counter-reset: name}
LI { display: block }
LI:before { content: counter(name, upper-alpha) ". "; counter-increment: name}
В первой строке мы создаем и сбрасываем счетчик с именем name. В второй строке мы изменяем модель тега LI. А в третей выводим на экран значение счетчика с разделителем, а потом увеличиваем его на единицу для следующего элемента.