counters()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La fonction CSS counters() permet d'obtenir des compteurs imbriqués en renvoyant la concaténation des chaînes de caractères des valeurs des compteurs passés en arguments. La fonction counters() peut s'utiliser sous deux formes :

  • counters(name, string)
  • counters(name, string, style)

Cette fonction est généralement utilisée sur des pseudo-éléments mais peut théoriquement être utilisée à tout endroit où une valeur <string> est attendue. Le texte généré est la concaténation des compteurs en commençant par les compteurs « parents » puis en ajoutant la valeurs des compteurs « fils ». Les compteurs sont affichés avec le style indiqué (par défaut, ce sera decimal).

css
/* Utilisation simple - style decimal par défaut */
counters(countername, '-');

/* Changement du style d'affichage */
counters(countername, '.', upper-roman)

Un compteur n'est pas visible en tant que tel. Les fonctions counters() et counter() doivent être utilisées pour créer du contenu.

Note : Bien que la fonction counters() puisse être utilisée avec n'importe quelle propriété CSS, la prise en charge des propriétés autres que content reste experimentale.

Avant d'utiliser cette fonctionnalité en production, référez vous au tableau de compatibilité ci-après.

Syntaxe

Valeurs

<custom-ident>

Un nom identifiant les compteurs à utiliser. C'est le même nom qui pourra être utilisé avec les propriétés counter-reset et counter-increment. Le nom ne peut pas commencer par deux tirets et ne peut pas être none, unset, initial ou inherit.

<counter-style>

Un style de compteur (cf. les valeurs décrites pour list-style-type) ou une fonction symbols(). En absence de valeur, le style utilisé sera decimal.

<string>

Une suite de caractères. Les caractères qui ne sont pas latins doivent être encodés avec leur séquence d'échappement Unicode. \000A9 représentera par exemple le symbole copyright (©).

none

Représente la chaîne vide.

Syntaxe formelle

<counters()> = 
  counters( <counter-name> , <string> , <counter-style>? )  

<counter-style> = 
  <counter-style-name>  |
  <symbols()>           

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed       

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Exemples

Style par défaut et chiffres romains

HTML

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

CSS

css
ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::marker {
  content: counters(listCounter, ".", upper-roman) ") ";
}
li::before {
  content: counters(listCounter, ".") " == "
    counters(listCounter, ".", lower-roman);
}

Résultat

Numérotation décimale (avec zéro) et indices alphabétiques

HTML

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

CSS

css
ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::marker {
  content: counters(count, ".", upper-alpha) ") ";
}
li::before {
  content: counters(count, ".", decimal-leading-zero) " == "
    counters(count, ".", lower-alpha);
}

Résultat

Spécifications

Specification
CSS Lists and Counters Module Level 3
# counter-functions

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi