Опубликовано: 18.08.2010 Последняя правка: 08.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

counter-increment

Свойство CSS counter-increment используется для указания величины, на которую будет увеличиваться счетчик при каждом появлении HTML-элемента в коде страницы. Сам счетчик и его начальное значение задаются свойством counter-reset, а способ нумерации свойством content.

Тип свойства

Назначение: контент.

Применяется: ко всем элементам.

Наследуется: нет.

Значения

Значением свойства counter-increment являются следующие величины:

  • Идентификатор(ы) — одно или несколько (через пробел) имен счетчиков, значения которых будут изменяться.
  • Число — целое число, указывающее шаг увеличения (приращение) счетчика. Пишется через пробел после каждого идентификатора, если не указано, то приращение равно единице (1). Допускаются отрицательные значения, тогда счетчик будет уменьшаться.
  • none — изменения значения счетчика или счетчиков для селектора, к которому применяется свойство counter-increment, не происходит.
  • inherit — наследует значение counter-increment от родительского элемента.

Процентная запись: не существует.

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

Синтаксис

counter-increment: [идентификатор число?]+ | none | inherit

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство counter-increment</title>
  <style type="text/css">
   body {
    counter-reset: zag2; /* создаем счетчик заголовков */
   }
   h2:before {
    content: "Глава " counter(zag2, upper-roman) ". "; /* добавляем в начале
          каждого заголовка текст, текущее значение счетчика и снова текст */
    counter-increment: zag2; /* при каждом появлении элемента H2, счетчик будет
                                увеличиваться на единицу */
   }
   h2 {
    counter-reset: parag; /* создаем счетчик параграфов */
   }
   p:before {
    content: counter(parag, lower-latin) ") "; /* добавляем в начале каждого
                                      параграфа значение счетчика и текст */
    counter-increment: parag; /* увеличение счетчика параграфов на единицу */
   }
  </style>
 </head>
 <body>
  <h2>Первый заголовок</h2>
  <p>Параграф.</p>
  <p>Параграф.</p>
  <p>Параграф.</p>

  <h2>Второй заголовок</h2>
  <p>Параграф.</p>
  <p>Параграф.</p>
 </body>
</html>

Результат примера

В данном примере счетчик заголовков (zag2) был объявлен для тега <BODY>. Это сделано для того, чтобы в пределах всей страницы счетчик не сбрасывался в начальное положение, а только увеличивался. По той же причине счетчик параграфов (parag) указан для тега <H2>, чтобы при каждом появлении заголовка он наоборот сбрасывался в исходное состояние.

Результат. Использование свойства CSS counter-increment.

Использование свойства CSS counter-increment

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:НетДаДаДаДаДа
CSS по алфавиту
CSS по назначению