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

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

Valori

Valore predefinito: none.

Esempio

Facciamo in modo che i paragrafi vengano numerati automaticamente:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

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

Результат:

Vedi anche