Својство counter-increment

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

Синтакса

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

Вредности

Подразумевана вредност: none.

Пример

Направићемо да се параграфи аутоматски нумеришу:

html<div id="parent">
  <p>текст</p>
  <p>текст</p>
  <p>текст</p>
  <p>текст</p>
  <p>текст</p>
</div>

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

Результат:

Пример

Нека поред нумерације дода и неки текст. У нашем случају № пре цифре и тачка после:

html<div id="parent">
  <p>текст</p>
  <p>текст</p>
  <p>текст</p>
  <p>текст</p>
  <p>текст</p>
</div>

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

Результат:

Пример

Почнимо нумерацију од 10-ти. За то почетном вредношћу бројача постављамо деветку, то јест за 1 мање него што нам треба:

html<div id="parent">
  <p>текст</p>
  <p>текст</p>
  <p>текст</p>
  <p>текст</p>
  <p>текст</p>
</div>

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

Результат:

Пример

Нека сада нумерација буде са кораком "2". За то као корак постављамо двојку:

html<div id="parent">
  <p>текст</p>
  <p>текст</p>
  <p>текст</p>
  <p>текст</p>
  <p>текст</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>текст</p>
  <p>текст</p>
  <p>текст</p>
  <p>текст</p>
  <p>текст</p>
</div>

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

Результат:

Погледајте такође