Svojstvo counter-increment

Svojstvo counter-increment postavlja automatsko numerisanje elemenata, na primer, paragrafa ili naslova. Koristi se zajedno sa svojstvom counter-reset, pseudoelementima after i before, svojstvom content, unutar kog se koristi funkcija counter. Za bolje razumevanje preporučujem da pogledate primere.

Sintaksa

cssselektor {
  counter-increment: naziv [korak] | none;
}

Vrednosti

Podrazumevana vrednost: none.

Primer

Uradimo da se paragrafi automatski numerišu:

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

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

Результат:

Primer

Neka pored numeracije bude dodat i neki tekst. U našem slučaju № ispred cifre i tačka posle:

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

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

Результат:

Primer

Počnimo numeraciju sa 10-ti. Za ovo početnu vrednost brojača postavljamo na devetku, odnosno za 1 manje nego što nam treba:

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

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

Результат:

Primer

Neka sada numeracija bude sa korakom "2". Za ovo kao korak stavljamo dvojku:

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

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

Результат:

Primer

U prethodnom primeru numeracija je počela sa dvojke, a mi bismo hteli sa jedinice. Zašto se to desilo? Zato što counter-reset resetuje vrednost brojača na nulu, a zatim counter-increment dodaje svoj korak: podrazumevano jedinicu, zato je ranije kod nas numeracija počinjala od 1. A sada se dodaje dvojka - i numeracija počinje od dvojke.

Za ispravljanje problema postavimo početnu vrednost brojača na -1 i sada će numeracija početi od 1 i biće uvećavana za 2:

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

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

Результат:

Pogledajte takođe