A counter-increment tulajdonság

A counter-increment tulajdonság automatikus számozást határoz meg az elemek számára, például a bekezdések vagy a címsorok esetében. Együtt használható a counter-reset tulajdonsággal, a after és before pszeudo-elemekkel, valamint a content tulajdonsággal, amelyen belül a counter függvény használatos. A jobb megértés érdekében ajánlom a példák megtekintését.

Szintaxis

szelektor {
	counter-increment: név [lépés] | none;
}

Értékek

Érték	Leírás
név	A számláló neve. Egy általános szó (mint egy osztály vagy azonosító neve). Több nevet is megadhatunk, szóközzel elválasztva. Ebben az esetben több számláló értéke változik egyszerre.
lépés	Pozitív vagy negatív egész szám. Nem kötelező paraméter.
`none`	Megakadályozza a számláló növelését a kiválasztott elemeknél.

Alapértelmezett érték: none.

Példa

Állítsuk be, hogy a bekezdések automatikusan számozódjanak:

<div id="parent">
	<p>szöveg</p>
	<p>szöveg</p>
	<p>szöveg</p>
	<p>szöveg</p>
	<p>szöveg</p>
</div>

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

Példa

Tegyük fel, hogy a számozáson kívül még valamilyen szöveg is jelenjen meg. Esetünkben a № szöveg a szám előtt és egy pont utána:

<div id="parent">
	<p>szöveg</p>
	<p>szöveg</p>
	<p>szöveg</p>
	<p>szöveg</p>
	<p>szöveg</p>
</div>

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

Példa

Kezdjük a számozást 10-től. Ehhez a számláló kezdőértékét állítsuk kilencre, vagyis 1-gyel kevesebbre, mint amennyire szükségünk van:

<div id="parent">
	<p>szöveg</p>
	<p>szöveg</p>
	<p>szöveg</p>
	<p>szöveg</p>
	<p>szöveg</p>
</div>

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

Példa

Legyen most a számozás lépése "2". Ehhez a lépés értékét állítsuk kettőre:

<div id="parent">
	<p>szöveg</p>
	<p>szöveg</p>
	<p>szöveg</p>
	<p>szöveg</p>
	<p>szöveg</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test 2; /* kettőt állítunk be */
	content: "№" counter(test) ".";
}

Példa

Az előző példában a számozás kettőtől indult, de mi eggyel szerettük volna. Miért történt így? Mert a counter-reset nullára állítja vissza a számláló értékét, majd a counter-increment hozzáadja a lépését: alapértelmezetten egyet, ezért indult korábban a számozás 1-től. Most viszont kettőt ad hozzá - és a számozás kettőtől indul.

A probléma megoldásához állítsuk a kezdő értéket -1-re, és mostantól a számozás 1-től indul és 2-vel növekszik:

<div id="parent">
	<p>szöveg</p>
	<p>szöveg</p>
	<p>szöveg</p>
	<p>szöveg</p>
	<p>szöveg</p>
</div>

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

Lásd még

a counter-reset tulajdonság,
amely nullára állítja vissza a számláló értékét