Свойство counter-increment
Свойството counter-increment задава
автоматично номериране на елементи, например,
параграфи или заглавия. Използва се съвместно
ъс свойството counter-reset,
псевдоелементите after
и before,
свойството content,
вътре в което се използва функцията counter.
За по-добро разбиране препоръчвам да разгледате
примерите.
Синтаксис
селектор {
counter-increment: название [шаг] | none;
}
Стойности
| Стойност | Описание |
|---|---|
| название | Име на брояч. Обикновена дума (като име на клас или id). Може да задавате няколко имена, разделяйки ги с интервал. В този случай едновременно ще се променят няколко брояча. |
| шаг | Цяло положително или отрицателно число. Незадължителен параметър. |
none |
Забранява увеличението на брояча за текущия селектор. |
Стойност по подразбиране: none.
Пример
Нека направим така, че параграфите да се номерират автоматично:
<div id="parent">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
#parent {
counter-reset: test;
}
#parent p::before {
counter-increment: test;
content: counter(test);
}
:
Пример
Нека освен номерацията да се добавя и някакъв
текст. В нашия случай № пред цифрата
и точка след:
<div id="parent">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
#parent {
counter-reset: test;
}
#parent p::before {
counter-increment: test;
content: "№" counter(test) ".";
}
:
Пример
Нека започнем номерацията от 10. За това
началната стойност на брояча поставяме девет,
тоест с 1 по-малко, отколкото ни трябва:
<div id="parent">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
#parent {
counter-reset: test 9;
}
#parent p::before {
counter-increment: test;
content: "№" counter(test) ".";
}
:
Пример
Нека сега номерацията да е със стъпка "2".
За това като стъпка поставяме двойка:
<div id="parent">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
#parent {
counter-reset: test;
}
#parent p::before {
counter-increment: test 2; /* поставяме двойка */
content: "№" counter(test) ".";
}
:
Пример
В предишния пример номерацията започна от
двойка, а ние бихме искали от единица. Защо
се случи така? Защото counter-reset
нулира стойностите на брояча на нула, а след това
counter-increment добавя своята стъпка:
по подразбиране единица, затова преди това при нас
номерацията започваше от 1. А сега
се прибавя двойка - и номерацията започва
от двойка.
За поправянето на проблема поставяме началната
стойност на брояча на -1 и сега
номерацията ще започне от 1 и ще
се увеличава с 2:
<div id="parent">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
#parent {
counter-reset: test -1;
}
p::before {
counter-increment: test 2;
content: "№" counter(test) ".";
}
:
Вижте също
-
свойство
counter-reset,
което нулира стойността на брояча на нула