Proprietà counter-set CSS

la pagina precedente counter-reset
la pagina seguente @counter-style

Definizione e uso

counter-set Proprietà utilizzata per creare e impostare un contatore CSS a un valore specifico.

counter-set Le proprietà sono solitamente utilizzate insieme alle proprietà counter-increment e content.

Esempio

Esempio 1

Crea un contatore ("my-counter"), impostalo a 5 e aumentalo di 1 ogni volta che compare il selettore <h2>:

body {
  /* Imposta "my-counter" a 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* Aumenta "my-counter" di 1 */
  counter-increment: my-counter;
  content: "Section " counter(my-counter) ". ";
}

Prova a fare tu stesso

Esempio 2

Crea un contatore ("my-counter"), impostalo a 5 e diminuiscilo di 1 ogni volta che compare il selettore <h2>:

body {
  /* Imposta "my-counter" a 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* Diminuisci "my-counter" di 1 */
  counter-increment: my-counter -1;
  content: "Section " counter(my-counter) ". ";
}

Prova a fare tu stesso

Usa i formati "Section 10:\

body {
  /* Imposta "section" a 9 */
  counter-set: section 9;
}
h1 {
  /* Imposta "subsection" a 0 */
  counter-set: subsection 0;
}
h1::before {
  /* Aumenta "section" di 1 */
  counter-increment: section;
  content: "Sezione " counter(section) ": ";
}
h2::before {
  /* Aumenta "subsection" di 1 */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Prova a fare tu stesso

Esempio 4

Crea un contatore, impostalo a 9 e aumentalo di 1 ogni volta che viene trovato il selettore <h2> (usando i numeri romani):

body {
  /* Imposta "my-counter" a 9 */
  counter-set: my-counter 9;
}
h2::before {
  /* Aumenta "my-counter" di 1 */
  counter-increment: my-counter;
  content: counter(my-counter, upper-roman) ". ";
}

Prova a fare tu stesso

Sintassi CSS

counter-set: none|counter-name numero|initial|inherit;

Valore dell'attributo

Valore	Descrizione
none	Valore predefinito. Non impostare il contatore.
counter-name numero	Il nome del contatore da impostare e il suo valore. Il contatore viene impostato su questo valore ogni volta che viene trovato il selettore. Il valore predefinito è 0.
initial	Imposta questo attributo al suo valore predefinito. Vedi initial.
inherit	Eredita questo attributo dal suo elemento padre. Vedi inherit.

Valore predefinito:	none
Ereditarietà:	No
Creazione dell'animazione:	Non supportato. Si prega di consultare:Proprietà correlate all'animazione.
Versione:	CSS2
Sintassi JavaScript:	object.style.counterSet="4"