CSS Compteurs
Compteurs CSS
Avec les compteurs CSS, vous pouvez créer une numérotation dynamique des éléments (comme les titres, sections ou éléments de liste) sans avoir besoin de JavaScript.
Les compteurs CSS sont des "variables" gérées par CSS, et leurs valeurs peuvent être incrémentées (ou décrémentées) par des règles CSS.
Pizza
Hamburger
Hotdogs
Numérotation Automatique CSS Avec Compteurs
Les compteurs CSS fonctionnent comme des "variables". Les valeurs de ces variables peuvent être incrémentées (ou décrémentées) par des règles CSS.
Pour travailler avec des compteurs CSS, nous utiliserons les propriétés suivantes :
-
counter-reset- Crée ou réinitialise un compteur -
counter-increment- Incrémente ou décrémente un compteur -
content- Insère du contenu généré (utilisé à l'intérieur de::beforeet::after, pour insérer le contenu généré) -
counter()etcounters()fonctions - Ajoute la valeur d'un compteur à un élément
Pour utiliser un compteur CSS, il doit d'abord être créé avec la propriété counter-reset .
Augmenter et Diminuer le Compteur CSS
L'exemple suivant crée un compteur pour la page (dans le sélecteur body), puis incrémente la valeur du compteur de 1 pour chaque élément <h2> et ajoute le texte "Section + countervalue :" au début de chaque élément <h2> :
Exemple
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
} La propriété counter-increment a un deuxième paramètre. La valeur par défaut est 1 (ce qui incrémente le compteur d'un). Pour diminuer la valeur du compteur, vous pouvez le définir à -1.
L'exemple suivant est similaire au précédent, mais ici nous décrémentons la valeur du compteur pour chaque élément <h2> et ajoutons le texte "Section + countervalue :" au début de chaque élément <h2> :
Exemple
body {
counter-reset: section;
}
h2::before {
counter-increment: section -1;
content: "Section " counter(section) ": ";
} L'exemple suivant est le même que le précédent, mais ici nous incrémentons la valeur du compteur de 2 pour chaque élément <h2> et ajoutons le texte "Section + countervalue :" au début de chaque élément <h2> :
Exemple
body {
counter-reset: section;
}
h2::before {
counter-increment: section 2;
content: "Section " counter(section) ": ";
} CSS Utilisation de Deux Compteurs
L'exemple suivant crée un compteur pour la page (nommé "section") et un compteur pour chaque élément <h1> (nommé "sous-section"). Le compteur "section" sera utilisé pour chaque élément <h1> avec "Section + sectioncounter >.", et le compteur "sous-section" sera utilisé pour chaque élément <h2> avec " sectioncounter . subsectioncounter ":
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) " ";
} La Fonction CSS counters()
La fonction counters() retourne les valeurs actuelles des compteurs nommés et imbriqués, sous forme de chaîne.
Ici, nous utilisons la fonction counters() 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 des Compteurs CSS
| Propriété | Description |
|---|---|
| content | Utilisé avec les pseudo-éléments ::before et ::after pour insérer du contenu généré |
| counter-increment | Incrémente une ou plusieurs valeurs de compteur |
| counter-reset | Crée ou réinitialise un ou plusieurs compteurs |
| counter() | Retourne la valeur actuelle du compteur nommé |
| counters() | Retourne les valeurs actuelles des compteurs nommés et imbriqués |