La propriété CSS counter-set définit un compteur CSS avec une certaine valeur. Elle permet de manipuler les valeurs des compteurs existants et ne créera qu'un nouveau compteur que lorsqu'il n'existe pas de compteur avec le nom indiqué sur l'élément.

Note : La valeur d'un compteur peut être incrémentée ou décrémentée grâce à la propriété CSS counter-increment.

Syntaxe

/* Définir "mon-compteur" avec la valeur 0 */
counter-set: mon-compteur;

/* Définir "mon-compteur" avec la valeur -1 */
counter-set: mon-compteur -1;

/* Définir "compteur1" avec 1 et "compteur2" à 4 */
counter-set: compteur1 1 compteur2 4;

/* Réinitialiser les compteurs qui auraient été */
/* définis avec des règles moins spécifiques */
counter-set: none;

/* Valeurs globales */
counter-set: inherit;
counter-set: initial;
counter-set: unset;

La propriété counter-set est définit avec l'une de ces deux valeurs :

  • Une valeur de type <custom-ident> qui fournit le nom du compteur, éventuellement suivie d'un entier (<integer>). Il est possible de définir plusieurs compteurs à réinitialiser en séparant les valeurs grâce à un espace.
  • Le mot-clé none.

Valeurs

<custom-ident>
Le nom du compteur à définir ou à modifier.
<integer>
La valeur à utiliser pour le compteur à chaque occurrence de l'élément. Par cette valeur sera 0. S'il n'existe pas déjà de compteur avec le nom courant pour l'élément, l'élément créera un nouveau compteur avec ce nom et utilisera alors cette valeur.
none
Aucune définition ou modification de compteur ne doit être appliquée. Cette valeur peut être utilisée afin de surcharger une déclaration counter-set d'une règle moins spécifique.

Syntaxe formelle

[ <custom-ident> <integer>? ]+ | none

Exemples

h1 {
  counter-set: chapitre section 1 page;
  /* Les compteurs "chapitre" et "page" sont 
     définis à 0, et le compteur "section"
     est défini à 1. */
}

Spécifications

Spécification État Commentaires
CSS Lists Module Level 3
La définition de 'counter-set' dans cette spécification.
Version de travail Définition initiale.
Valeur initialenone
Applicabilitétous les éléments
Héritéenon
Médiatous
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
counter-setChrome Aucun support NonEdge Aucun support NonFirefox Support complet 68IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 68Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,