Ominaisuus counter-increment

Ominaisuus counter-increment asettaa automaattisen elementtien numerointiin, esimerkiksi kappaleiden tai otsikoiden. Sitä käytetään yhdessä ominaisuuden counter-reset, pseudoelementtien after ja before, ominaisuuden content kanssa, jossa käytetään funktiota counter. Parempaa ymmärtämistä varten suosittelen katsomaan esimerkkejä.

Syntaksi

valitsija {
	counter-increment: nimi [askel] | none;
}

Arvot

Arvo	Kuvaus
nimi	Laskurin nimi. Tavallinen sana (kuten luokan tai id:n nimi). Voit asettaa useita nimiä erottelemalla ne välilyönnillä. Tässä tapauksessa useita laskureita muutetaan samanaikaisesti.
askel	Kokonaisluku positiivinen tai negatiivinen. Valinnainen parametri.
`none`	Kieltää laskurin kasvattamisen nykyiselle valitsijalle.

Oletusarvo: none.

Esimerkki

Tehdään niin, että kappaleet numeroidaan automaattisesti:

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

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

Esimerkki

Olkoon numerointiin lisäksi lisätty jokin teksti. Meidän tapauksessamme № ennen numeroa ja piste jälkeen:

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

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

Esimerkki

Aloitetaan numerointi 10:stä. Tätä varten asetamme laskurin alkuarvoksi yhdeksän, eli 1 vähemmän kuin tarvitsemme:

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

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

Esimerkki

Olkoon numerointi nyt askeleella "2". Tätä varten asetamme askeleeksi kaksi:

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

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

Esimerkki

Edellisessä esimerkissä numerointi alkoi kahdesta, mutta halusimme yhdestä. Miksi näin tapahtui? Koska counter-reset nollaa laskurin arvon nollaan, ja sitten counter-increment lisää oman askeleensa: oletusarvoisesti yhden, siksi aiemmin meillä numerointi alkoi 1:stä. Mutta nyt lisätään kaksi - ja numerointi alkaa kahdesta.

Ongelman korjaamiseksi asetamme laskurin alkuarvoksi -1 ja nyt numerointi alkaa 1:stä ja kasvaa 2:lla:

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

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

Katso myös

ominaisuus counter-reset,
joka nollaa laskurin arvon nollaan