Egenskapen counter-increment

Egenskapen counter-increment setter automatisk nummerering av elementer, for eksempel, avsnitt eller overskrifter. Brukes sammen med egenskapen counter-reset, pseudoelementene after og before, egenskapen content, innenfor hvilken funksjonen counter brukes. For bedre forståelse anbefaler jeg å se eksemplene.

Syntaks

velger {
	counter-increment: navn [trinn] | none;
}

Verdier

Verdi	Beskrivelse
navn	Tellerens navn. Et vanlig ord (som klasse- eller id-navn). Kan sette flere navn, skille dem med mellomrom. I dette tilfellet vil flere tellere endres samtidig.
trinn	Heltall, positivt eller negativt. Valgfri parameter.
`none`	Forbyr økning av telleren for gjeldende velger.

Standardverdi: none.

Eksempel

La oss gjøre slik at avsnitt nummereres automatisk:

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

Eksempel

La det i tillegg til nummerering legges til noe annen tekst. I vårt tilfelle № foran tallet og punktum etter:

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

Eksempel

La oss starte nummereringen fra 10. For dette setter vi startverdien til telleren til ni, det vil si 1 mindre enn vi trenger:

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

Eksempel

La nå nummereringen være med trinn "2". For dette setter vi to som trinn:

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

Eksempel

I forrige eksempel startet nummereringen med to, men vi ønsket med en. Hvorfor skjedde det? Fordi counter-reset nullstiller tellerverdien, og deretter legger counter-increment til sitt trinn: standardt er en, derfor hadde vi tidligere nummerering startet med 1. Men nå legges det til to - og nummereringen starter med to.

For å fikse problemet setter vi start verdien til telleren til -1 og nå vil nummereringen starte med 1 og øke med 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) ".";
}

Se også

egenskapen counter-reset,
som nullstiller tellerverdien