CSS counter-increment Property
Voorbeeld
Maak een teller ("mijn-sec-teller") en verhoog deze met één voor elke keer dat de <h2>-selector voorkomt:
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) ". ";
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De counter-increment
eigenschap verhoogt of verlaagt de waarde van een of meer CSS-tellers.
De counter-increment
eigenschap wordt meestal samen met de
eigenschap counter-reset en de
eigenschap content gebruikt .
Standaardwaarde: | geen |
---|---|
geërfd: | Nee |
Animeerbaar: | Nee. Lees over animeren |
Versie: | CSS2 |
JavaScript-syntaxis: | object .style.counterIncrement = "subsectie"; |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Property | |||||
---|---|---|---|---|---|
counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS-syntaxis
counter-increment: none|id|initial|inherit;
Eigendomswaarden
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 |
Meer voorbeelden
Voorbeeld
Maak een teller ("mijn-sec-teller") en verlaag deze met één voor elke keer dat de <h2>-selector voorkomt:
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) ". ";
}
Voorbeeld
Nummering van paragrafen en subparagrafen met "Sectie 1:", "1.1", "1.2", enz.:
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) " ";
}
Voorbeeld
Maak een teller en verhoog deze met één (met Romeinse cijfers) voor elke keer dat de <h2>-selector voorkomt:
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) ". ";
}
Gerelateerde pagina's
CSS-referentie: ::voor pseudo-element
CSS-referentie: ::na pseudo-element
CSS-referentie: inhoudseigenschap
CSS -referentie: eigenschap tegenreset
CSS-functies: counter() functie
HTML DOM-referentie: counterIncrement-eigenschap