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

❮ Назад Вперед ❯

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

Свойство counter-increment имеет две значения - none и id numbers. "None" - значение по умолчанию этого свойства. При значении "id number" использование отрицательных значений допустимо. Значение по умолчанию инкремента равно 1. Если идентификатор ссылается на счетчик, который не был инициализирован с помощью counter-reset, значение по умолчанию равно 0.

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

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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>

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

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      /* Set "section" to 0 */
      counter-reset: section;
      }
      h1 {
      /* Set "subsection" to 0 */
      counter-reset: subsection;
      }
      h1::before {
      counter-increment: section;
      content: "Book " counter(section) ": ";
      }
      h2::before {
      counter-increment: subsection;
      content: counter(section) "." counter(subsection) " ";
      }
    </style>
  </head>
  <body>
    <h1>HTML</h1>
    <h2>HTML Basics</h2>
    <h2>HTML Templates</h2>
    <h2>HTML References</h2>
    <h2>HTML Tags</h2>
    <h1>CSS</h1>
    <h2>CSS Basics</h2>
    <h2>CSS References</h2>
    <h2>CSS Advanced</h2>
    <h2>CSS Guides</h2>
    <h2>CSS Selectors</h2>
    <h2>CSS Properties</h2>
  </body>
</html>

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

Значения

Значение	Описание
none	Счетчик не будет использоваться. Значение по умолчанию.
id number	Id определяет, какой счетчик использовать. Number определяет значение приращения счетчика.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.