Compteurs CSS
Pizza
Hamburger
Les hot-dogs
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 compteurcounter-increment- Incrémente une valeur de compteurcontent- Insère le contenu générécounter()oucounters()fonction - 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 <h2> et ajoute "Section < valeur du compteur > :" au début de chaque élément <h2> :
Exemple
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Compteurs d'emboîtement
L'exemple suivant crée un compteur pour la page (section) et un compteur pour chaque élément <h1> (sous-section). Le compteur "section" sera compté pour chaque élément <h1> avec "Section < valeur du compteur de section >.", et le compteur "sous-section" sera compté pour chaque élément <h2> avec "< valeur du compteur de section >.< valeur du compteur de sous-section >":
Exemple
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment:
section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content:
counter(section) "." counter(subsection) " ";
}
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, nous utilisons la
counters()fonction pour insérer une chaîne entre différents niveaux de compteurs imbriqués :
Exemple
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
Propriétés du compteur CSS
| Property | Description |
|---|---|
| content | Used with the ::before and ::after pseudo-elements, to insert generated content |
| counter-increment | Increments one or more counter values |
| counter-reset | Creates or resets one or more counters |
| counter() | Returns the current value of the named counter |