counter()

La fonction CSS counter() renvoie une chaîne de caractères qui représente la valeur courante du compteur nommé (dont le nom est passé en argument). Elle est généralement utilisée pour construire un pseudo-élément mais elle peut tout à fait être utilisée à n'importe quel endroit où une valeur <string> est attendue.

/* Usage simple */
counter(nomcompteur);

/* Modifier le type d'affichage du compteur */
counter(nomcompteur, upper-roman)

Un compteur CSS n'a aucun effet visible en lui-même. C'est la fonction counter() (ainsi que counters()) qui permet d'utiliser la chaîne de caractère ou l'image résultante.

Note  : La fonction counter() peut être utilisée avec n'importe quelle propriété CSS mais la prise en charge des propriétés autres que content reste expérimentale et la prise en charge du paramètre « type ou unité » est hétérogène.

Veillez à consulter le tableau de compatibilité des navigateurs avant d'utiliser ces fonctionnalités en production.

Syntaxe

Valeurs

<custom-ident>
Un nom identifiant le compteur (sensible à la casse). C'est le même nom qui pourra être utilisé avec counter-reset et  counter-increment. Le nom ne peut pas commencer avec deux tirets et ne peut pas être l'un des mots-clés none, unset, initial ou inherit.
<counter-style>
Un nom de style de compteur ou une fonction symbols(). Le nom d'un style de compteur peut indiquer un compteur alphabétique, numérique, symbolique ou encore utilisant un système de numération asiatique ou éthiopien ou un autre style de compteur prédéfini. Si cette valeur n'est pas fournie, le style par défaut est décimal.
none
Représente la chaîne de caractère vide.

Syntaxe formelle

La syntaxe n'a pas été trouvée !

Exemples

Comparaison entre compteur par défaut et chiffres romains majuscules

HTML

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

CSS

ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::after {
  content: "[" counter(listCounter) "] == ["
               counter(listCounter, upper-roman) "]";
}

Résultat

Comparaison entre compteur décimal avec zéro et compteur alphabétique minuscule

HTML

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

CSS

ol {
  counter-reset: count;
}

li {
  counter-increment: count;
}

li::after {
  content: "[" counter(count, decimal-leading-zero) "] == ["
               counter(count, lower-alpha) "]";
}

Résultat

Spécifications

Spécification État Commentaires
CSS Lists Module Level 3
La définition de 'CSS Counters' dans cette spécification.
Version de travail Aucune modification.
CSS Level 2 (Revision 1)
La définition de 'CSS Counters' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
counter()Chrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 8Opera Support complet 9.2Safari Support complet 3WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 1Samsung Internet Android Support complet 1.0

Légende

Support complet  
Support complet

Voir aussi