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

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

Свойство counter-increment задаётся двумя значениями: none и идентификатором со смещением (id number). Значение none является значением по умолчанию для этого свойства. Оно позволяет использовать отрицательные значения в случае указания идентификатора со смещением. Приращение по умолчанию равно 1. Если идентификатор счётчика не инициализирован свойством counter-reset, его начальное значение равно 0. Значение счётчика можно установить в произвольное число с помощью свойства counter-reset.

Начальное значение	none
Применяется к	Ко всем элементам.
Наследуется	Нет.
Анимация	Дискретная.
Версия	CSS2
Синтаксис DOM	object.style.counterIncrement = "subsection";

Синтаксис

Синтаксис свойства CSS counter-increment

css

counter-increment: none | id number | initial | inherit;

Пример свойства counter-increment:

Пример использования свойства CSS counter-increment

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        /* "my-counter" to 0 */
        counter-reset: my-counter;
      }
      h2::before {
        /* "my-counter" by 1 */
        counter-increment: my-counter;
        content: "Section " counter(my-counter) ". ";
      }
    </style>
  </head>
  <body>
    <h2>HTML Tutorial</h2>
    <h2>CSS Tutorial</h2>
    <h2>JavaScript Tutorial</h2>
    <h2>PHP Tutorial</h2>
  </body>
</html>

Try it Yourself »

Результат

CSS counter-increment Property

Пример свойства counter-increment с нумерованными разделами и подразделами:

Свойство CSS counter-increment со значением для подразделов

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        /* Set "section" to 0 */
        counter-reset: section;
      }
      h2 {
        /* Set "subsection" to 0 */
        counter-reset: subsection;
      }
      h2::before {
        counter-increment: section;
        content: "Book " counter(section) ": ";
      }
      h3::before {
        counter-increment: subsection;
        content: counter(section) "." counter(subsection) " ";
      }
    </style>
  </head>
  <body>
    <h2>HTML</h2>
    <h3>HTML Basics</h3>
    <h3>HTML Templates</h3>
    <h3>HTML References</h3>
    <h3>HTML Tags</h3>
    <h2>CSS</h2>
    <h3>CSS Basics</h3>
    <h3>CSS References</h3>
    <h3>CSS Advanced</h3>
    <h3>CSS Guides</h3>
    <h3>CSS Selectors</h3>
    <h3>CSS Properties</h3>
  </body>
</html>

Try it Yourself »

Пример свойства counter-increment с римскими цифрами:

Пример использования свойства counter-increment с римскими цифрами:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        /* "my-counter" to 0 */
        counter-reset: my-counter;
      }
      h2::before {
        /* "my-counter" by 1 */
        counter-increment: my-counter;
        content: counter(my-counter, upper-roman) ". ";
      }
    </style>
  </head>
  <body>
    <h2>HTML Tutorial</h2>
    <h2>CSS Tutorial</h2>
    <h2>JavaScript Tutorial</h2>
    <h2>PHP Tutorial</h2>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание
none	Счётчики не увеличиваются. Это значение по умолчанию.
id number	Идентификатор определяет, какой счётчик увеличивать. Число определяет, на сколько будет увеличиваться счётчик.
initial	Устанавливает свойству значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Какова роль свойства 'counter-increment' в CSS?

Оно автоматически увеличивает счётчик каждый раз при вызове.Оно используется для установки цвета текста.Это свойство отвечает только за размер и макет.Оно используется вместе со свойством 'content' для создания нумерованных элементов без необходимости вручную вставлять промежуточные числа.Оно определяет стиль шрифта.

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

Синтаксис ​

Пример свойства counter-increment: ​

Результат ​

Пример свойства counter-increment с нумерованными разделами и подразделами: ​

Пример свойства counter-increment с римскими цифрами: ​

Значения ​

Практика ​

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

Синтаксис

Пример свойства counter-increment:

Результат

Пример свойства counter-increment с нумерованными разделами и подразделами:

Пример свойства counter-increment с римскими цифрами:

Значения

Практика