CSS свойство `counter-increment`

Определение и применение

CSS свойство counter-increment увеличивает одно или более значений счетчика. Чаще всего используется вместе со свойствами counter-reset и content.

Попробуйте значения counter-increment

Счётчик step выводится через counter(step) в ::before. Начальное значение равно 0. Каждый абзац изменяет счётчик на выбранную величину.

Значение свойстваcounter-increment: step 1;counter-increment: step 2;counter-increment: step -1;

counter-increment: step 1

HTML и CSS примера

HTML

<div class="stage">
  <p class="demo-target">Первый</p>
  <p class="demo-target">Второй</p>
  <p class="demo-target">Третий</p>
</div>

CSS

.stage {
  width: 100%;
  max-width: 300px;
  counter-reset: step 0;
  font: 18px/1.5 system-ui;
  color: #172c3d;
}
.demo-target {
  padding: 8px;
  background: #ffe4bd;
  counter-increment: step 1;
}
p {
  margin: 8px 0;
}
p::before {
  content: counter(step) ". ";
  color: #245a85;
  font-weight: bold;
}

CSS

.stage {
  width: 100%;
  max-width: 300px;
  counter-reset: step 0;
  font: 18px/1.5 system-ui;
  color: #172c3d;
}
.demo-target {
  padding: 8px;
  background: #ffe4bd;
  counter-increment: step 2;
}
p {
  margin: 8px 0;
}
p::before {
  content: counter(step) ". ";
  color: #245a85;
  font-weight: bold;
}

CSS

.stage {
  width: 100%;
  max-width: 300px;
  counter-reset: step 0;
  font: 18px/1.5 system-ui;
  color: #172c3d;
}
.demo-target {
  padding: 8px;
  background: #ffe4bd;
  counter-increment: step -1;
}
p {
  margin: 8px 0;
}
p::before {
  content: counter(step) ". ";
  color: #245a85;
  font-weight: bold;
}

Поддержка браузерами

Спецификация: CSS lists

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.counter-increment
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`counter-increment`	✓2	✓12	✓1	✓9.2	✓3	✓18	✓25	✓10.1	✓1	✓1.0	✓4.4	✓1
`list-item`	✓28	✓12	✓1	✓15	✓9	✓28	✓25	✓15	✓9	✓1.5	✓4.4	✓9
`none`	✓2	✓12	✓1	✓15	✓3	✓18	✓25	✓14	✓2	✓1.0	✓4.4	✓2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS

counter-increment: [ <counter-name> <integer>? ]+ | none;

/* Глобальные значения */
counter-increment: initial | inherit | unset | revert | revert-layer;

| — выбор варианта; [ ] — группа, а внутри типа — допустимый диапазон; ? — необязательная часть; + — одно или несколько повторений.

JavaScript синтаксис:

JavaScript

element.style.counterIncrement = "nazvanie";

Начальное значение свойства

none.

Значения свойства

Значения counter-increment
Значение	Описание
`none`	Нет счетчиков, которые будут инкрементированы (увеличены на 1). Начальное значение.
`id number`	Идентификатор определяет, какой счетчик должен быть инкрементирован (увеличен). По умолчанию счетчик увеличивается на 1, но это значение может быть изменено, для этого необходимо указать после идентификатора число на которое счетчик будет увеличиваться при каждом новом появлении элемента для которого это значение было установлено. Допускается использование отрицательных значений и нуля. Если идентификатор ссылается на счетчик, который не был инициализирован с помощью свойства `counter-reset`, то по умолчанию начальное значение равно нулю.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для ненаследуемого свойства `counter-increment` устанавливает его начальное значение.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Спецификация

CSS Lists and Counters — спецификация counter-increment.

Наследуется

Нет.

Анимируемое

Да, по вычисленному значению: совместимые числовые значения интерполируются плавно. Переход между несовместимыми типами или ключевыми словами может быть дискретным.

Примеры, попробуйте сами

Автоматическая нумерация

Измените counter-increment: chapter на chapter 2. Номера будут увеличиваться на два.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}

index.html