Propriété CSS counter-reset
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-reset
propriété crée ou réinitialise un ou plusieurs compteurs CSS.
La counter-reset
propriété est généralement utilisée avec la
propriété counter-increment 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.counterReset="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-reset | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Syntaxe CSS
counter-reset: none|name number|initial|inherit;
Valeurs de propriété
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 |
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 contre-incrémentation
Fonctions CSS : fonction compteur()
Référence HTML DOM : propriété counterReset