Compteurs CSS

Les compteurs CSS sont définis au moyen d'une variable, et la variable est incrémentée selon des règles.

Utiliser les compteurs pour numéroter automatiquement

Les compteurs CSS incrémentent une variable selon des règles.

Les compteurs CSS utilisent les propriétés suivantes :

  • counter-reset- Créer ou réinitialiser des compteurs
  • counter-increment- Incrémenter des variables
  • content- Insérer du contenu généré
  • counter()oucounters()Fonction - ajoute la valeur du compteur à un élément

Pour utiliser les compteurs CSS, vous devez d'abord les créer avec counter-reset :

L'exemple suivant crée un compteur sur la page (dans le sélecteur body). La valeur du compteur de chaque élément <h2> est incrémentée, et "Section <" est ajouté avant chaque élément <h2>.valeur du compteur>:"

Exemples CSS

body { counter-reset: section; } h2::before { counter-increment: section; content: "Section " counter(section) ": "; }

Essayez-le vous-même »

compteurs imbriqués

L'exemple suivant crée un compteur sur la page, en ajoutant la valeur du compteur "Section <" avant chaque élément <h1>.Valeur du compteur du titre principal>.", la valeur du compteur imbriqué est placée avant l'élément <h2>, avec le contenu "<"Valeur du compteur du titre principal>.<Valeur du compteur du sous-titre>":

Exemples CSS

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 »

Les compteurs peuvent également être utilisés dans des listes, où les éléments enfants de la liste sont créés automatiquement. Ici, nous utilisonscounters()Fonction pour insérer des chaînes à différents niveaux d'imbrication :

Exemples CSS

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

Essayez-le vous-même »

Propriétés des compteurs CSS

Propriété Description
content Utilisez les pseudo-éléments ::before et ::after pour insérer du contenu généré automatiquement
counter-increment Incrémente une ou plusieurs valeurs
counter-reset Crée ou réinitialise un ou plusieurs compteurs
autres extensions