Les compteurs CSS sont des “variables” maintenues par CSS dont les valeurs peuvent être incrémentées par des règles CSS (pour suivre le nombre de fois qu’elles sont utilisées). Les compteurs vous permettent d’ajuster l’apparence du contenu en fonction de son emplacement dans le document.

Numérotation automatique avec compteurs

Les compteurs CSS sont comme des “variables”. Les valeurs des variables peuvent être incrémentées par des règles CSS (qui suivront combien de fois elles sont utilisées).

Pour travailler avec les compteurs CSS, nous utiliserons les propriétés suivantes :

• counter-reset – Crée ou réinitialise un compteur
• counter-increment – Incrémente une valeur de compteur
• content – Insère le contenu généré
• counter() ou counters() function – Ajoute la valeur d’un compteur à un élément

Pour utiliser un compteur CSS, il doit d’abord être créé avec counter-reset.

L’exemple suivant crée un compteur pour la page (dans le sélecteur de corps), puis incrémente la valeur du compteur pour chaque élément

et ajoute “Section <valeur du compteur> :” au début de chaque élément

 :

Exemple

corps {
compteur-reset : section ;
}

h2::avant {
contre-incrément : section ;
content : “Section ” compteur(section)”: ” ;
}

Essayez-le vous-même »

---

---

Compteurs d’emboîtement

L’exemple suivant crée un compteur pour la page (section) et un compteur pour chaque élément

(sous-section). Le compteur “section” sera compté pour chaque élément

avec “Section <valeur du compteur de section>.”, et le compteur “sous-section” sera compté pour chaque élément

avec “<valeur du compteur de section>.<valeur du compteur de sous-section>”:

Exemple

corps {
compteur-reset : section ;
}

h1 {

contre-réinitialisation : sous-section ;
}

h1::avant {
contre-incrément : section ;
content : “Section ” compteur(section) “. ” ;
}

h2::avant {

contre-incrément : sous-section ;
contenu : compteur (section) “.” compteur(sous-section) ” ” ;
}

Essayez-le vous-même »

Un compteur peut également être utile pour créer des listes détaillées car une nouvelle instance d’un compteur est automatiquement créée dans les éléments enfants. Ici on utilise le
counters() fonction pour insérer une chaîne entre différents niveaux de compteurs imbriqués :

Exemple

ol {
compteur-reset : section ;

type de style de liste : aucun ;
}

li :: avant {
contre-incrément : section ;

contenu : compteurs(section,”.”) ” ” ;
}

Essayez-le vous-même »

---

Propriétés du compteur CSS