Egenskapen counter-increment

Egenskapen counter-increment sätter automatisk numrering av element, till exempel, stycken eller rubriker. Används tillsammans med egenskapen counter-reset, pseudoelementen after och before, egenskapen content, inuti vilken funktionen counter används. För bättre förståelse rekommenderar jag att titta på exemplen.

Syntax

selektor {
	counter-increment: namn [steg] | none;
}

Värden

Värde	Beskrivning
namn	Räknarens namn. Ett vanligt ord (som namn på klass eller id). Kan sätta flera namn, separerade med mellanslag. I detta fall kommer flera räknare att ändras samtidigt.
steg	Heltal positivt eller negativt. Valfri parameter.
`none`	Förbjuder ökning av räknaren för nuvarande selektor.

Standardvärde: none.

Exempel

Låt oss göra så att stycken numreras automatiskt:

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

Exempel

Låt förutom numrering läggas till någon annan text. I vårt fall № före siffran och punkt 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) ".";
}

Exempel

Låt oss börja numreringen från 10. För detta sätter vi räknarens startvärde till nio, det vill säga 1 mindre än vi behöver:

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

Exempel

Låt nu numreringen ha steg "2". För detta sätter vi tvåan som steg:

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

Exempel

I föregående exempel började numreringen med tvåan, men vi vill gärna ha ettan. Varför hände det så? Eftersom counter-reset återställer räknarens värde till noll, och sedan lägger counter-increment till sitt steg: som standard ettan, därför började tidigare vår numrering från 1. Men nu läggs tvåan till - och numreringen börjar med tvåan.

För att lösa problemet sätter vi start- värdet på räknaren till -1 och nu kommer numreringen att börja från 1 och kommer att ökas 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 även

egenskapen counter-reset,
som återställer räknarens värde till noll