Utilisation des compteurs CSS
compteurs CSS sont comme des "variables". Les valeurs des variables peuvent être incrémenté par des règles CSS (qui permettra de suivre combien de fois ils sont utilisés).
Pour travailler avec les compteurs de CSS, nous allons utiliser les propriétés suivantes:
-
counter-reset- Crée ou réinitialise un compteur -
counter-increment- Incrémente une valeur de compteur -
content- Inserts contenu généré -
counter()oucounters()fonction - Ajoute la valeur d'un compteur à un élément
Pour utiliser un compteur de 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 <h2> élément et ajoute "Section < value of the counter >:" au début de chaque <h2> élément:
Exemple
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Essayez - le vous - même » Compteurs Nesting
L'exemple suivant crée un compteur pour la page (section) et un compteur pour chaque <h1> élément (paragraphe). La "section" compteur sera compté pour chaque <h1> élément avec "Section < value of the section counter >." Et le "subsection" compteur sera compté pour chaque <h2> élément avec "< value of the section counter >.< value of the subsection counter >" :
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) " ";
} Essayez - le vous - même » Un compteur peut également être utile de faire des listes présentées car une nouvelle instance d'un compteur est automatiquement créé dans les éléments enfants. Ici , nous utilisons les counters() fonction pour insérer une chaîne entre les différents niveaux de compteurs imbriqués:
Exemple
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
} Essayez - le vous - même » CSS Propriétés Compteur
| Propriété | La description |
|---|---|
| content | Utilisé avec le :: :: avant et après les pseudo-éléments, pour insérer le 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 |