Свойство counter-increment

Свойството counter-increment задава автоматично номериране на елементи, например, параграфи или заглавия. Използва се съвместно ъс свойството counter-reset, псевдоелементите after и before, свойството content, вътре в което се използва функцията counter. За по-добро разбиране препоръчвам да разгледате примерите.

Синтаксис

cssселектор {
  counter-increment: название [шаг] | none;
}

Стойности

Стойност по подразбиране: none.

Пример

Нека направим така, че параграфите да се номерират автоматично:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test;
  content: counter(test);
}

Результат:

Пример

Нека освен номерацията да се добавя и някакъв текст. В нашия случай № пред цифрата и точка след:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test;
  content: "№" counter(test) ".";
}

Результат:

Пример

Нека започнем номерацията от 10. За това началната стойност на брояча поставяме девет, тоест с 1 по-малко, отколкото ни трябва:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test 9;
}
#parent p::before {
  counter-increment: test;
  content: "№" counter(test) ".";
}

Результат:

Пример

Нека сега номерацията да е със стъпка "2". За това като стъпка поставяме двойка:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test 2; /* поставяме двойка */
  content: "№" counter(test) ".";
}

Результат:

Пример

В предишния пример номерацията започна от двойка, а ние бихме искали от единица. Защо се случи така? Защото counter-reset нулира стойностите на брояча на нула, а след това counter-increment добавя своята стъпка: по подразбиране единица, затова преди това при нас номерацията започваше от 1. А сега се прибавя двойка - и номерацията започва от двойка.

За поправянето на проблема поставяме началната стойност на брояча на -1 и сега номерацията ще започне от 1 и ще се увеличава с 2:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test -1;
}
p::before {
  counter-increment: test 2;
  content: "№" counter(test) ".";
}

Результат:

Вижте също