Proprietatea counter-increment

Proprietatea counter-increment definește numerotarea automată a elementelor, de exemplu, a paragrafelor sau a titlurilor. Este utilizată împreună cu proprietatea counter-reset, pseudoelementele after și before, proprietatea content, în interiorul căreia este utilizată funcția counter. Pentru o mai bună înțelegere vă recomand să consultați exemplele.

Sintaxă

selector {
	counter-increment: nume [increment] | none;
}

Valori

Valoare	Descriere
nume	Numele contorului. Un cuvânt obișnuit (ca numele unei clase sau id). Se pot defini mai multe nume, separându-le cu spațiu. În acest caz, mai multe contoare vor fi modificate simultan.
increment	Număr întreg pozitiv sau negativ. Parametru opțional.
`none`	Interzice incrementarea contorului pentru selectorul curent.

Valoarea implicită: none.

Exemplu

Să facem ca paragrafele să fie numerotate automat:

<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);
}

Exemplu

Să presupunem că în afară de numerotare se adaugă și un text. În cazul nostru № înaintea cifrei și un punct după:

<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) ".";
}

Exemplu

Să începem numerotarea de la 10. Pentru aceasta setăm valoarea inițială a contorului la nouă, adică cu 1 mai puțin decât avem nevoie:

<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) ".";
}

Exemplu

Să presupunem că acum numerotarea va fi cu pasul "2". Pentru aceasta, ca increment setăm doi:

<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; /* setăm doi */
	content: "№" counter(test) ".";
}

Exemplu

În exemplul anterior numerotarea a început de la doi, dar noi am fi vrut de la unu. De ce s-a întâmplat așa? Pentru că counter-reset resetează valoarea contorului la zero, iar apoi counter-increment adaugă incrementul său: implicit unu, de aceea înainte numerotarea noastră începea de la 1. Acum se adaugă doi - și numerotarea începe de la doi.

Pentru a remedia problema, setăm valoarea inițială a contorului la -1 și acum numerotarea va începe de la 1 și va crește cu 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) ".";
}

Veți și

proprietatea counter-reset,
care resetează valoarea contorului la zero