Compteur CSS

Pizza

Hamburger

Hotdogs

Les compteurs CSS sont des "variables" gérées par CSS et leurs valeurs peuvent être augmentées via les règles CSS (pour suivre leur utilisation).

Les compteurs permettent de modifier l'apparence en fonction de la position du contenu dans le document.

Numérotation automatique avec les compteurs

Les compteurs CSS sont comme des "variables" et leurs valeurs peuvent être augmentées via les règles CSS (pour suivre leur utilisation).

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

  • counter-reset - créez ou réinitialisez le compteur
  • counter-increment - augmentez la valeur du compteur
  • content - insérez le contenu généré
  • counter() ou counters() fonction - ajoutez la valeur du compteur à l'élément

Pour utiliser les compteurs CSS, vous devez d'abord utiliser counter-reset Créez-le.

L'exemple suivant crée un compteur pour la page (dans le sélecteur body) puis augmente 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) ": ";
}

Essayer vous-même

Compteurs imbriqués

L'exemple suivant crée un compteur pour la page (section) et un compteur pour chaque élément <h1> (subsection).

"section" compteur pour chaque élément <h1> écrit "Section" ainsi que la valeur du compteur section, "subsection" compteur pour chaque élément <h2> écrit la valeur du compteur section ainsi que la valeur du compteur subsection :

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) " ";
}

Essayer vous-même

Les compteurs sont également très utiles pour créer des listes de sommaire, car un nouvel exemple de compteur est automatiquement créé dans les éléments enfants. Ici, nous utilisons counters() La fonction insère une chaîne entre les compteurs de niveau différent :

Exemple

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

Essayer vous-même

Propriétés de compteur CSS

Propriété Description
content Utilisé avec les pseudo-éléments ::before et ::after pour insérer du contenu généré.
counter-increment Incémenter une ou plusieurs valeurs de compteur.
counter-reset Créer ou réinitialiser un ou plusieurs compteurs.