Egenskaben counter-increment

Egenskaben counter-increment angiver automatisk nummerering af elementer, for eksempel, afsnit eller overskrifter. Anvendes sammen med egenskaben counter-reset, pseudoelementerne after og before, egenskaben content, hvori funktionen counter anvendes. For en bedre forståelse anbefaler jeg at se eksemplerne.

Syntaks

selektor {
	counter-increment: navn [trin] | none;
}

Værdier

Værdi	Beskrivelse
navn	Tællerens navn. Et almindeligt ord (som et klasse- eller id-navn). Det er muligt at angive flere navne, adskilt af mellemrum. I dette tilfælde vil flere tællere blive ændret samtidigt.
trin	Et helt positivt eller negativt tal. Valgfri parameter.
`none`	Forhinderer forøgelse af tælleren for den aktuelle selektor.

Standardværdi: none.

Eksempel

Lad os sørge for, at afsnit 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

Lad os ud over nummereringen tilføje noget andet tekst. I vores tilfælde № før tallet og et punktum efter:

<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

Lad os starte nummereringen fra 10. For at gøre dette sætter vi startværdien af tælleren til ni, det vil sige 1 mindre end vi har brug for:

<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

Lad nummereringen nu være med et trin på "2". For at gøre dette sætter vi to som trin:

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

Eksempel

I det foregående eksempel startede nummereringen med to, men vi ville gerne starte med en. Hvorfor skete dette? Fordi counter-reset nulstiller tællerværdien til nul, og derefter tilføjer counter-increment sit trin: som standard en, derfor startede vores nummerering tidligere med 1. Men nu lægges der to til - og nummereringen starter med to.

For at løse problemet sætter vi den startende værdi af tælleren til -1, og nu starter nummereringen med 1 og vil øges 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å

egenskaben counter-reset,
som nulstiller tællerværdien til nul