Savybė counter-increment

Savybė counter-increment nustato automatinį elementų numeravimą, pavyzdžiui, paragrafų arba antraščių. Naudojama kartu su savybe counter-reset, pseudoelementais after ir before, savybe content, kurio viduje naudojama funkcija counter. Kad geriau suprastumėte, rekomenduoju pažiūrėti pavyzdžius.

Sintaksė

selektorius {
	counter-increment: pavadinimas [žingsnis] | none;
}

Reikšmės

Reikšmė	Aprašas
pavadinimas	Skaitiklio pavadinimas. Įprastas žodis (kaip klasės arba id pavadinimas). Galima nustatyti kelis pavadinimus, atskiriant juos tarpu. Tokiu atveju vienu metu keisis keli skaitikliai.
žingsnis	Sveikas teigiamas arba neigiamas skaičius. Neprivalomas parametras.
`none`	Uždraudžia skaitiklio didinimą dabartiniam selektoriui.

Numatytoji reikšmė: none.

Pavyzdys

Padarykime taip, kad paragrafai būtų automatiškai numeruojami:

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

Pavyzdys

Tegul be numeracijos pridedamas dar koks nors tekstas. Mūsų atveju № prieš skaičių ir taškas po:

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

Pavyzdys

Pradėkime numeraciją nuo 10. Tam pradine skaitiklio reikšme nustatome devynetą, tai yra 1 mažiau, nei mums reikia:

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

Pavyzdys

Tegul dabar numeracija būna su žingsniu "2". Tam kaip žingsnį nustatome dvejetą:

<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; /* nustatome dvejetą */
	content: "№" counter(test) ".";
}

Pavyzdys

Ankstesniame pavyzdyje numeracija prasidėjo nuo dvejeto, o mes norėtume nuo vieneto. Kodėl taip atsitiko? Todėl, kad counter-reset atstatė skaitiklio reikšmes į nulį, o tada counter-increment prideda savo žingsnį: pagal nutylėjimą vienetą, todėl anksčiau mes numeracija prasidėdavo nuo 1. O dabar pridedama dvejeto - ir numeracija prasideda nuo dvejeto.

Kad išspręstume problemą, nustatykime pradinę skaitiklio reikšmę į -1 ir dabar numeracija prasidės nuo 1 ir bus didinama po 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) ".";
}

Taip pat žiūrėkite

savybė counter-reset,
kuri atstato skaitiklio reikšmę į nulį