Propriété CSS counter-increment
Exemple
Créez un compteur ("my-sec-counter") et augmentez-le de un pour chaque occurrence du sélecteur <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) ". ";
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La counter-increment
propriété augmente ou diminue la valeur d'un ou plusieurs compteurs CSS.
La counter-increment
propriété est généralement utilisée avec la
propriété counter-reset et la
propriété content .
Valeur par défaut: | rien |
---|---|
Hérité: | non |
Animable : | non. En savoir plus sur l'animation |
Version: | CSS2 |
Syntaxe JavaScript : | objet .style.counterIncrement = "sous-section" ; |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Property | |||||
---|---|---|---|---|---|
counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Syntaxe CSS
counter-increment: none|id|initial|inherit;
Valeurs de propriété
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 |
Plus d'exemples
Exemple
Créez un compteur ("my-sec-counter") et diminuez-le de un pour chaque occurrence du sélecteur <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) ". ";
}
Exemple
Numérotation des sections et sous-sections avec "Section 1 :", "1.1", "1.2", etc. :
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) " ";
}
Exemple
Créez un compteur et augmentez-le de un (en chiffres romains) pour chaque occurrence du sélecteur <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) ". ";
}
Pages connexes
Référence CSS : ::before pseudo-élément
Référence CSS : ::after pseudo-élément
Référence CSS : propriété de contenu
Référence CSS : propriété de réinitialisation du compteur
Fonctions CSS : fonction compteur()
Référence HTML DOM : propriété counterIncrement