Proprietà CSS contatore-incremento
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-increment
proprietà aumenta o diminuisce il valore di uno o più contatori CSS.
La counter-increment
proprietà viene solitamente utilizzata insieme alla
proprietà di azzeramento del contatore e alla proprietà del
contenuto .
Valore di default: | nessuno |
---|---|
Ereditato: | no |
Animabile: | no. Leggi su animabile |
Versione: | CSS2 |
sintassi JavaScript: | oggetto .style.counterIncrement = "sottosezione"; |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
Property | |||||
---|---|---|---|---|---|
counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Sintassi CSS
counter-increment: none|id|initial|inherit;
Valori di proprietà
Value | Description |
---|---|
none | Default value. No counters will be incremented |
id number | The id defines which counter to increment. The number sets how much the counter will increment on each occurrence of the selector. The default increment is 1. Negative values are allowed. If id refers to a counter that has not been initialized by counter-reset, the default initial 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) ". ";
}
Pagine correlate
Riferimento CSS: ::prima dello pseudo elemento
Riferimento CSS: ::dopo lo pseudo elemento
Riferimento CSS: proprietà del contenuto
Riferimento CSS: proprietà di ripristino del contatore
Funzioni CSS: funzione counter()
Riferimento HTML DOM: proprietà counterIncrement