Īpašība counter-increment

Īpašība counter-increment nosaka automātisku elementu numerāciju, piemēram, rindkopu vai virsrakstu. Tiek lietota kopā ar īpašību counter-reset, pseidoelementiem after un before, īpašību content, kura iekšpusē tiek lietota funkcija counter. Lai labāk saprastu, iesaku apskatīt piemērus.

Sintakse

selektors {
	counter-increment: nosaukums [solis] | none;
}

Vērtības

Vērtība	Apraksts
nosaukums	Skaitītāja nosaukums. Parasts vārds (tāpat kā klases vai id nosaukums). Var iestatīt vairākus nosaukumus, atdalot tos ar atstarpēm. Šajā gadījumā vienlaikus tiks mainīti vairāki skaitītāji.
solis	Vesels pozitīvs vai negatīvs skaitlis. Neobligāts parametrs.
`none`	Aizliedz skaitītāja palielināšanu pašreizējam selektoram.

Noklusējuma vērtība: none.

Piemērs

Uztaisīsim, lai rindkopas tiktu automātiski numurētas:

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

Piemērs

Lai papildus numerācijai tiktu pievienots vēl kāds teksts. Mūsu gadījumā № pirms cipara un punkts pēc:

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

Piemērs

Sāksim numerāciju no 10. Šim nolūkam sākotnējā skaitītāja vērtība tiek iestatīta uz deviņi, tas ir, par 1 mazāk, nekā mums vajag:

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

Piemērs

Lai tagad numerācija būtu ar soli "2". Šim nolūkam kā soli iestatām divi:

<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; /* iestatām divi */
	content: "№" counter(test) ".";
}

Piemērs

Iepriekšējā piemērā numerācija sākās ar divi, bet mēs vēlētos ar vienu. Kāpēc tā notika? Tāpēc, ka counter-reset atiestata skaitītāja vērtību uz nulli, un pēc tam counter-increment pievieno savu soli: pēc noklusējuma vienu, tāpēc iepriekš mums numerācija sākās ar 1. Bet tagad tiek pievienots divi - un numerācija sākas ar divi.

Lai izlabotu problēmu, iestatīsim sākotnējo skaitītāja vērtību uz -1 un tagad numerācija sāksies ar 1 un palielināsies par 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) ".";
}

Skatiet arī

īpašība counter-reset,
kura atiestata skaitītāja vērtību uz nulli