Eigenschap counter-increment

De eigenschap counter-increment bepaalt automatische nummering van elementen, bijvoorbeeld, paragrafen of koppen. Wordt gebruikt in combinatie met de eigenschap counter-reset, pseudoelementen after en before, de eigenschap content, waarin de functie counter wordt gebruikt. Voor een beter begrip raad ik aan om de voorbeelden te bekijken.

Syntaxis

selector {
	counter-increment: naam [stap] | none;
}

Waarden

Waarde	Beschrijving
naam	Naam van de teller. Een gewoon woord (zoals een klassenaam of id). Meerdere namen kunnen worden ingesteld, gescheiden door spaties. In dat geval worden meerdere tellers tegelijkertijd gewijzigd.
stap	Positief of negatief geheel getal. Optionele parameter.
`none`	Verbiedt het verhogen van de teller voor de huidige selector.

Standaardwaarde: none.

Voorbeeld

Laten we ervoor zorgen dat paragrafen automatisch worden genummerd:

<div id="parent">
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test;
	content: counter(test);
}

Voorbeeld

Stel dat er naast de nummering nog een andere tekst wordt toegevoegd. In ons geval № vóór het cijfer en een punt achter:

<div id="parent">
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test;
	content: "№" counter(test) ".";
}

Voorbeeld

Laten we de nummering beginnen vanaf 10. Hiervoor stellen we de beginwaarde van de teller in op negen, dus 1 minder dan we nodig hebben:

<div id="parent">
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
</div>

#parent {
	counter-reset: test 9;
}
#parent p::before {
	counter-increment: test;
	content: "№" counter(test) ".";
}

Voorbeeld

Stel dat de nummering nu een stap van "2" heeft. Hiervoor stellen we twee in als stap:

<div id="parent">
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test 2; /* stel twee in */
	content: "№" counter(test) ".";
}

Voorbeeld

In het vorige voorbeeld begon de nummering met twee, maar we wilden graag met één beginnen. Waarom gebeurde dit? Omdat counter-reset de tellerwaarde op nul zet, en vervolgens counter-increment zijn stap toevoegt: standaard één, daarom begon onze nummering eerder met 1. Maar nu wordt er twee opgeteld - en de nummering begint met twee.

Om het probleem op te lossen, stellen we de beginwaarde van de teller in op -1 en nu begint de nummering met 1 en zal met 2 toenemen:

<div id="parent">
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
</div>

#parent {
	counter-reset: test -1;
}
p::before {
	counter-increment: test 2;
	content: "№" counter(test) ".";
}

Zie ook

de eigenschap counter-reset,
die de tellerwaarde op nul zet