fonction counters() de CSS

définition et utilisation

CSS counters() La fonction retourne la valeur actuelle du compteur nommé et du compteur imbriqué sous forme de chaîne de caractères.

ici, nous utilisons counters() La fonction insère une chaîne de caractères entre les compteurs de niveaux imbriqués.

exemple

Exemple 1

ici, nous utilisons counters() La fonction insère une chaîne de caractères entre les compteurs de niveaux imbriqués (un point) :

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

essayez-le vous-même

Exemple 2

Définir le style du compteur et configurer la chaîne de connexion à "-":

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

essayez-le vous-même

grammaire CSS

counters(countername, string, counterstyle)
valeur description
countername

obligatoire. Nom du compteur (identique au nom utilisé pour les attributs counter-reset et counter-increment).

attention, les noms sont sensibles à la casse.
string obligatoire. Chaîne de connexion. Peut contenir un nombre quelconque de caractères de texte.
counterstyle

optionnel. Le style du compteur (peut être une valeur de list-style-type, un nom de @counter-style ou une fonction symbols()).

La valeur par défaut est decimal.

détails techniques

Version : CSS3

supporte par les navigateurs

Chrome Edge Firefox Safari Opera
supporte supporte supporte supporte supporte

pages associées

Tutoriel :Compteur CSS

Référence :Attribut content CSS

Référence :Attribut counter-increment CSS

Référence :Attribut counter-reset CSS

Référence :Règle @counter-style CSS

Référence :Fonction counter() CSS