Proprietà di ripristino del contatore CSS

❮ Precedente Riferimento CSS completo Avanti ❯

Esempio

Crea un contatore ("my-sec-counter") e aumentalo di uno per ogni occorrenza del selettore <h2>:

body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}

h2::before {
  /* Increment "my-sec-counter" by 1 */
  counter-increment: my-sec-counter;
  content: "Section " counter(my-sec-counter) ". ";
}

Altri esempi "Provalo da solo" di seguito.

Definizione e utilizzo

La counter-resetproprietà crea o reimposta uno o più contatori CSS.

La counter-resetproprietà viene solitamente utilizzata insieme alla proprietà counter-increment e alla proprietà content .

Valore di default:	nessuno
Ereditato:	no
Animabile:	no. Leggi su animabile
Versione:	CSS2
sintassi JavaScript:	oggetto .style.counterReset="sezione"

Supporto browser

I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.

Property
counter-reset	4.0	8.0	2.0	3.1	9.6

Sintassi CSS

counter-reset: none|name number|initial|inherit;

Valori di proprietà

Value	Description
none	Default value. No counters will be reset
id number	The id defines which counter to reset. The number sets the value the counter is reset to on each occurrence of the selector. The default number value is 0
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Altri esempi

Esempio

Crea un contatore ("my-sec-counter") e diminuiscilo di uno per ogni occorrenza del selettore <h2>:

body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}

h2::before {
/* Decrement "my-sec-counter" by 1 */
counter-increment: my-sec-counter -1;
content: "Section " counter(my-sec-counter) ". ";
}

Esempio

Numerazione di sezioni e sottosezioni con "Sezione 1:", "1.1", "1.2", ecc.:

body {
   /* Set "section" to 0 */
counter-reset: section;
}

h1 {
   /* Set "subsection" to 0 */
  counter-reset: subsection;
}

h1::before {
/* Increment "section" by 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}

h2::before {
  /* Increment "subsection" by 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}

Esempio

Crea un contatore e aumentalo di uno (usando i numeri romani) per ogni occorrenza del selettore <h2>:

body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}

h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment: my-sec-counter;
content: counter(my-sec-counter, upper-roman) ". ";
}