# Свойство counter-increment

Свойство `counter-increment` задает автоматическую нумерацию элементов, например, абзацев или заголовков. Используется совместно со свойством `counter-reset`, псевдоэлементами `after` и `before`, свойством `content`, внутри которого используется функция `counter`. Для лучшего понимания рекомендую посмотреть примеры.

## Синтаксис

`селектор { counter-increment: название [шаг] | none; }`

## Значения

Значение | Описание
--- | ---
название | Название счетчика. Обычное слово (как название класса или id). Можно задавать несколько названий, разделяя их пробелом. В этом случае одновременно будут меняться несколько счетчиков.
шаг | Целое положительное или отрицательное число. Необязательный параметр.
`none` | Запрещает увеличение счетчика для текущего селектора.

Значение по умолчанию: `none`.

## Пример

Сделаем так, чтобы абзацы нумеровались автоматически:

`<div id="parent"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div>` `#parent { counter-reset: test; } #parent p::before { counter-increment: test; content: counter(test); }`

:

## Пример

Пусть кроме нумерации добавляется еще какой-нибудь текст. В нашем случае `№` перед цифрой и точка после:

`<div id="parent"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div>` `#parent { counter-reset: test; } #parent p::before { counter-increment: test; content: "№" counter(test) "."; }`

:

## Пример

Начнем нумерацию с `10`-ти. Для этого начальным значением счетчика ставим девятку, то есть на `1` меньше, чем нам нужно:

`<div id="parent"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div>` `#parent { counter-reset: test 9; } #parent p::before { counter-increment: test; content: "№" counter(test) "."; }`

:

## Пример

Пусть теперь нумерация будет с шагом "`2`". Для этого в качестве шага ставим двойку:

`<div id="parent"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div>` `#parent { counter-reset: test; } #parent p::before { counter-increment: test 2; /* ставим двойку */ content: "№" counter(test) "."; }`

:

## Пример

В предыдущем примере нумерация началась с двойки, а мы хотели бы с единицы. Почему так произошло? Потому что `counter-reset` сбрасывает значения счетчика в ноль, а затем `counter-increment` добавляет свой шаг: по умолчанию единицу, поэтому раньше у нас нумерация начиналась с `1`. А теперь прибавляется двойка - и нумерация начинается с двойки.

Для исправления проблемы поставим начальное значение счетчика в `-1` и теперь нумерация начнется с `1` и будет увеличиваться на `2`:

`<div id="parent"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div>` `#parent { counter-reset: test -1; } p::before { counter-increment: test 2; content: "№" counter(test) "."; }`

:

## Смотрите также

- свойство `counter-reset`,
  которое сбрасывает значение счетчика в ноль

← →
↑
en ru