Proprietà counter-increment

La proprietà counter-increment imposta la numerazione automatica degli elementi, ad esempio, paragrafi o titoli. Viene utilizzata insieme alla proprietà counter-reset, agli pseudoelementi after e before, alla proprietà content, all'interno della quale viene utilizzata la funzione counter. Per una migliore comprensione consiglio di guardare gli esempi.

Sintassi

selettore {
	counter-increment: nome [incremento] | none;
}

Valori

Valore	Descrizione
nome	Nome del contatore. Una parola normale (come il nome di una classe o id). È possibile impostare più nomi, separandoli con uno spazio. In questo caso, più contatori verranno modificati simultaneamente.
incremento	Numero intero positivo o negativo. Parametro opzionale.
`none`	Impedisce l'incremento del contatore per il selettore corrente.

Valore predefinito: none.

Esempio

Facciamo in modo che i paragrafi vengano numerati automaticamente:

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

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

Esempio

Oltre alla numerazione, aggiungiamo anche del testo. Nel nostro caso № prima del numero e un punto dopo:

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

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

Esempio

Iniziamo la numerazione da 10. Per fare ciò impostiamo il valore iniziale del contatore a nove, cioè a 1 in meno di quanto ci serve:

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

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

Esempio

Ora facciamo in modo che la numerazione abbia un passo di "2". Per fare ciò impostiamo due come incremento:

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

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

Esempio

Nell'esempio precedente la numerazione è iniziata con due, ma noi vorremmo che iniziasse con uno. Perché è successo? Perché counter-reset reimposta il valore del contatore a zero, e poi counter-increment aggiunge il suo incremento: per default uno, quindi prima la numerazione iniziava con 1. Ora invece viene aggiunto due - e la numerazione inizia con due.

Per correggere il problema, impostiamo il valore iniziale del contatore a -1 e ora la numerazione inizierà con 1 e aumenterà di 2:

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

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

Vedi anche

la proprietà counter-reset,
che reimposta il valore del contatore a zero