counter-increment в CSS

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

Это свойство позволяет увеличить значение счетчика приращений, который задается свойством counter-reset. Такой счётчик подсчитывает количество отображений элементов и может выводиться с помощью свойства content. Это позволяет создавать списки (включая многоуровневые), в которых нумерация и вид задаются через стили.

CSS синтаксис

Возможные значения

Значение Описание
none Значение по умолчанию. Запрещает увеличение счетчика.
идентификатор Определяет одну или несколько переменных, для которых нужно изменить счетчик. Переменные разделяются пробелом.
целое число Определяет приращение счетчика. По умолчанию оно равно 1. Можно использовать отрицательные и нулевые значения.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.


Способ пронумировать главы и подглавы в виде «Глава 1», «1.1», «1.2» и т.д.

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


Создать счетчик («my-sec-counter») и увеличить его на единицу для каждого вхождения селектора

body <
/* установка «my-sec-counter» с 0 */
counter-reset: my-sec-counter;

h2::before <
/* увеличение «my-sec-counter» на 1 */
counter-increment: my-sec-counter;
content: «Section » counter(my-sec-counter) «. «;

Определение и использование

Свойство counter-increment увеличивает или уменьшает значение одного или нескольких счетчиков CSS.

Свойство counter-increment свойство обычно используется вместе с counter-reset и content.

Значение по умолчанию: none
Унаследованный: нет
Анимируемый: нет. Прочитать о animatable
Версия: CSS2
JavaScript синтаксис: = «subsection»; Попробовать

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

counter-increment 4.0 8.0 2.0 3.1 9.6

CSS Синтаксис

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

Значение Описание
none Значение по умолчанию. Счетчики не будут увеличиваться
id number id определяет, какой счетчик увеличить. number задает, на сколько счетчик будет увеличиваться при каждом вхождении селектора. По умолчанию приращение равно 1. Допускаются отрицательные значения. Если id ссылается на счетчик, который не был инициализирован с помощью counter-reset, начальное значение по умолчанию равно 0
initial Устанавливает для этого свойства значение по умолчанию. Прочитать о initial
inherit Наследует это свойство от родительского элемента. Прочитать о inherit



Создайте счетчик «my-sec-counter») и уменьшите его на единицу для каждого вхождения селектора

body <
/* установка «my-sec-counter» с 0 */
counter-reset: my-sec-counter;

h2::before <
/* уменьшение «my-sec-counter» на 1 */
counter-increment: my-sec-counter -1;
content: «Section » counter(my-sec-counter) «. «;


Нумерация разделов и подразделов с «Section 1:», «1.1», «1.2», и т.д.:

body <
/* установка «section» с 0 */
counter-reset: section;

h1 <
/* установка «subsection» с 0 */
counter-reset: subsection;

h1::before <
/* увеличение «section» на 1 */
counter-increment: section;
content: «Section » counter(section) «: «;

h2::before <
/* увеличение «subsection» на 1 */
counter-increment: subsection;
content: counter(section) «.» counter(subsection) » «;


Создайте счетчик и увеличьте его на единицу (используя римские цифры) для каждого вхождения селектора

body <
/* установка «my-sec-counter» to 0 */
counter-reset: my-sec-counter;

h2::before <
/* увеличение «my-sec-counter» на 1 */
counter-increment: my-sec-counter;
content: counter(my-sec-counter, upper-roman) «. «;

Связанные страницы

CSS Справочник: Псевдо элемент ::before

CSS Справочник: Псевдо элемент ::after

CSS Справочник: Свойство content

CSS Справочник: Свойство counter-reset

HTML DOM Справочник: Свойство counterIncrement

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

Свойство counter-increment используется для увеличения и уменьшения значений счетчика. Это свойство используется вместе со свойствами content и counter-reset.

Свойство counter-increment имеет две значения — none и >counter-reset , значение по умолчанию равно 0.

Значение по умолчанию none
Применяется Ко всем элементам.
Наследуется Нет
Анимируемое Discrete.
Версия CSS2
DOM синтаксис = «subsection»;



Пример, где разделы и подразделы пронумерованы:

CSS Counter Increment is not working

This is my CSS and HTML:

This code is not working.

This inserts 1 every time, what am I missing?

2 Answers 2

You should have this css on the ul itself:

and counter-increment should only contain headings :

Just Add the following style additionally

then the value will be increment

Not the answer you’re looking for? Browse other questions tagged html css or ask your own question.

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2020 Stack Exchange Inc; user contributions licensed under cc by-sa 4.0 with attribution required. rev 2020.11.9.35389


The counter-increment property is used to specify the increment value for one or more CSS counters.

It takes one or more identifiers as a value, which specify the names of the counters that are to be incremented. Each counter name is optionally followed by an optional value that indicates by how much the counter is incremented for every occurrence of the element that you’re numbering. The default increment is 1. Zero and negative integers are allowed. If a negative integer is specified, the counter is decremented.

The following is an example defining a counter using the counter-reset property, and then specifying that is will be incremented by one (the default value used if you don’t specify an integer value) for every occurrence of an h2 heading inside an article:

The following are all valid counter-increment values:

The counter-increment property is used in conjunction with the counter-reset property. For more information on how to use the counter-increment property to increment counters, see the Using Counters section in the Counters entry.

Official Syntax

  • Syntax:
  • Initial: none
  • Applies To: all elements
  • Animatable: no
  • Browser Support

    CSS Counters

    Method of controlling number values in generated content, using the `counter-reset` and `counter-increment` properties.


    Easily manage projects with

    Ordered lists aren’t the only elements that can be automatically numbered. Thanks to the various counter-related properties, any element can be.

    Each will respectively start with «1», «2», «3», or «4».

    You can control the style of the counter by comma separating the counter function. e.g. to make them use Roman numerals:

    More Information

    Browser Support

    Chrome Safari Firefox Opera IE Android iOS
    2+ 3.1+ Any 9.2+ 8+ TBD TBD


    The guy drove home without paying for the skirt steak! haha

    hmm it looks like Android and iOS has a good support too.

    Event without script we can change number of li with counter-increament

    I have edited your code a bit so it is actually working.

    You have to move counter-increment property from li:before to li itself. Also in counter-reset property you cannot use commas, just spaces to separate values.

    @transGLUKator Thanks for the note.

    But can you explain why the article demo as the counter reset value seperated by commas ?

    Is it possible to use it like this:

    I can’t get it working, would be nice if it would work that way also.

    I’m almost certain that ‘counter’ only works within the ‘content’ property on pseudo elements (e.g. ::before, ::after)

    is there any technique or advice on how to make the counters clickable links? I can’t see how but I’ve been asked to do so on an already established design.

    Couldn’t you just wrap it up inside an anchor tag?

    Then in your css, try something like..

    I’ve run into an issue where I have code like so:

    This works no problem on page load. The problem I’m running into is whenever I hover over .MarkerLabel, it seems to be inserting an additional ::before pseudo element inside the .MarkerLabel. So I end up with the original ::before pseudo element that has a counter value of 1 and then when I hover, a second pseudo element appears with a counter value (in this case) of 54, like it’s doing it all over again on hover. Make no sense to me. Anyone else run into issues with :hover and the CSS counter?

    Counter-increment в CSS

    Css module of single purpose classes for counter increment

    214 16 16
    bytes selectors declarations

    Learn more about using css installed with npm:

    Import the css module

    Then process the css using the tachyons-cli

    The easiest and most simple way to use the css is to use the cdn hosted version. Include it in the head of your html with:

    The built css is located in the css directory. It contains an unminified and minified version. You can either cut and paste that css or link to it directly in your html.

    The source css files can be found in the src directory. Running $ npm start will process the source css and place the built css in the css directory.

    Counter-increment в CSS

    Свойство counter-increment используется для определения элемента, который будет нумероваться, и для задания значения приращений счетчика (шага увеличения значения), установленного с помощью свойства counter-reset .

    Это свойство применимо ко всем элементам.

    Не поддерживается Internet Explorer до версии 8.0.

    Свойство counter-increment используется совместно со свойствами counter-reset и content , а также с псевдоэлементами before и after для автоматизации процесса нумерации.


    — идентификатор + целое число – указывается имя счетчика и значение его приращений, то есть число, на которое будет увеличиваться нумерация (по умолчанию значение счетчика увеличивается на 1).

    — none — запрещает увеличение значения счетчика,

    — inherit — принимает значение свойства родительского элемента.

    Значение по умолчанию


    Пример 1 — Свойства counter-increment и counter-reset

    «-//W3C//DTD HTML 4.01 Transitional//EN»
    «» >

    «Content-Type» content= «text/html; charset=windows-1251» >
    Свойства counter-increment и counter-reset

    1. Первый пункт списка — под номером 2
    2. Второй пункт списка — под номером 2 + 2 = 4
    3. Третий пункт списка — под номером 6
    4. — номер четвертого пункта списка и т.д.

    CSS counter-increment

    The CSS counter-increment property assists in generating automatic numbering (for example, Heading 1, Heading 2, Heading 2.1 etc) by incrementing the count by a given number.

    Every element has a collection of zero or more counters, which are inherited through the document tree. Counters have a name, an integer value, and a creator element. They can also have another counter nested inside themselves.

    The counter-increment property indicates by how much the counter is incremented for every occurrence of the element. The default increment is 1. Zero and negative integers are allowed.

    The counter-increment property accepts one or more names (identifiers for the counter/s), with each one (optionally) followed by an integer (which indicates by how much the count is to be incremented or decremented).

    Also see the counter-reset and content properties.


    Possible Values

    The element alters the value of one or more counters on it. If there is not currently a counter of the given name on the element, the element creates a new counter of the given name with a starting value of 0 (though it may then immediately set or increment that value to something different).

    If an integer is prov >custom-ident , it sets the innermost counter of the given name’s value to that integer (for the counter-set property) or increments the value of the innermost counter of the given name by that integer (for the counter-increment property). Otherwise, the innermost counter of the given name’s value is set to 0 (for the counter-set property) or incremented by 1 (for the counter-increment property).

    In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

    initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

    Руководство по CSS counter

    Дата публикации: 2020-04-16

    От автора: используйте свойство CSS counter, чтобы превратить любой элемент в нумерованный список. Аналогично тому, как работает тег упорядоченного списка ol. Это очень полезно, если вы создаете сайт документации, где вам нужно автоматически нумеровать заголовки или создавать оглавление.

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Как работает свойство counter

    Чтобы счетчик заработал, нужно сделать 3 вещи:

    Определить и инициализировать счетчик

    Обеспечить увеличение счетчика

    1. Определение и инициализация счетчика

    Этот шаг состоит из 2 частей. Вам нужно определить счетчик и задать ему имя.

    1a. Определение счетчика

    Я назвал счетчик tidbit-counter. Мы задаем для него имя, чтобы иметь возможность вызвать его в дальнейшем.

    1б. Инициализация счетчика

    Дальше нам нужно инициализировать счетчик. По умолчанию его начальное значение — 0. Обратите внимание, что этот номер не отображается. Именно здесь вы устанавливаете «старт» счетчика. Так что, если бы я установил 20, то у меня был бы вывод 21, 22, 23… и т.д., предполагая, что шаг увеличения у меня 1 (подробнее об этом ниже).

    Где применяется свойство counter-reset?

    Вам нужно применить свойство counter-reset к родительскому элементу. Вот что произойдет, если вы примените его не к родителю.

    И вот вывод. Как вы заметили, счетчик не увеличивается должным образом:

    Кроме того, он не обязательно должен быть прямым родителем. Пока это HTML-элемент, который оборачивает ваш список, то все в порядке. Как, например:

    2. Увеличение значения счетчика

    Вы установили счетчик. Теперь вы можете начать увеличивать его значение. Вот синтаксис для этого свойства:

    Как вы заметили, он принимает целочисленный аргумент. Это означает, что вы не ограничены просто увеличением значения счетчика на 1. В приведенном ниже примере предполагается, что для counter-reset установлено 0.

    И да, вы также можете передать отрицательное целое число, чтобы уменьшать значение счетчика. Хорошо, давайте посмотрим, как это будет реализовано:

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    3. Вывод счетчика

    Наконец, чтобы отобразить счетчик, нам нужно передать функцию counter в качестве значения для свойства content. Свойство content часто позволяет отображать значение в HTML через CSS. Вот синтаксис для нашей функции counter.

    По умолчанию мы работали с числами. И это стиль списка счетчика по умолчанию, или, как он называется в документации, стиль. Но вы также можете перейти на другие стили.

    Полный список стилей вы можете найти здесь.

    Несколько счетчиков

    Вы также можете установить несколько счетчиков, просто задав другое имя счетчика.

    Вложенный счетчик

    Вы также можете установить вложенный счетчик. Вместо использования counter, вам нужно использовать форму множественного числа counters. counters принимает дополнительный аргумент:

    Аргумент string — это разделитель строк, который вы используете, чтобы указать, как вы хотите отделить элемент списка для вложенных счетчиков.

    Давайте рассмотрим пример:

    counter или ol

    CSS counter не заменяет ol. Если у вас есть нумерованный упорядоченный список, то вы все равно должны использовать

      , потому что важно структурировать HTML, используя правильную семантику. Семантическая разметка имеет решающее значение для доступности и SEO.

    Предпочтительно использовать ol

    Вот пример, где я должен использовать ol. В данном случае я просто перечисляю несколько правил. Имеет смысл использовать упорядоченный список ol.

    Илон Маск рекомендует:  Книги о CMS (движках сайтов)
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL