Omadus counter-increment

Omadus counter-increment määrab elementide automaatse nummerdamise, näiteks lõikude või pealkirjade. Kasutatakse koos omadusega counter-reset, pseudoelementidega after ja before, omadusega content, mille sees kasutatakse funktsiooni counter. Parema mõistmise huvides soovitan vaadata näiteid.

Süntaks

valija {
	counter-increment: nimi [samm] | none;
}

Väärtused

Väärtus	Kirjeldus
nimi	Loenduri nimi. Tavaline sõna (nagu klassi või id nimi). Saab määrata mitu nime, eraldades need tühikuga. Sel juhul muudetakse korraga mitut loendurit.
samm	Täisarv positiivne või negatiivne. Valikuline parameeter.
`none`	Keelab loenduri suurendamise praeguse valija jaoks.

Vaikeväärtus: none.

Näide

Teeme nii, et lõigud nummerdatakse automaatselt:

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

Näide

Olgu peale nummerdamise lisandub veel mingi tekst. Meie puhul № numbri ees ja punkt peale:

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

Näide

Alustame nummerdamist 10-st. Selleks paneme loenduri algväärtuseks üheksa, see tähendab 1 võrra vähem, kui meil vaja:

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

Näide

Olgu nüüd nummerdamine sammuga "2". Selleks paneme sammuks kahe:

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

Näide

Eelmises näites algas nummerdamine kahest, aga me tahtsime ühest. Miks nii juhtus? Sellepärast, et counter-reset lähtestab loenduri väärtuse nulli, ja siis counter-increment lisab oma sammu: vaikimisi ühe, seepärast oli meil varem nummberdamine algusega 1-st. Aga nüüd lisandub kaks - ja nummerdamine algab kahest.

Probleemi parandamiseks paneme algse loenduri väärtuseks -1 ja nüüd algab nummerdamine 1-st ja suureneb 2 võrra:

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

Vaata ka

omadus counter-reset,
mis lähtestab loenduri väärtuse nulli