Attribut COUNTER-INCREMENT

Rôle

L’attribut counter-increment est utilisé pour la numérotation automatique des éléments. Il permet d’augmenter la valeur d’un compteur CSS.

La numérotation automatique est utile pour la création de table de matière ou pour hiéarchiser les informations selon un ordre précis.

La numérotation automatique permet d’extrapoler le principe des listes ordonnées (ol) à tous les éléments HTML.

Cet attribut s’utilise conjointement avec l’attribut counter-reset dont le rôle est de réinitialiser la valeur du compteur.

Version : CSS2

Héritage (inherit) : non

Propriété Javascript : element.style.counterIncrement

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

body {
  counter-increment: section 2;
}
h1 {
  counter-increment: subsection;
}
h1:before {
  counter-increment: section;
  content: counter(section) "- ";
  color: green;
}
h2:before {
  counter-increment: subsection;
  content: counter(section) "-" counter(subsection) " ";
  color: red;
}

– Le code HTML

<h1>Langage web</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>Javascript</h2>

Résultat

Dans cet exemple, on rajoute une numérotation au titre (h1) et sous-titre (h2).

Explication :

• Pour le titre h1 on créer sur la balise body (unique) un compteur nommé section qui commence à 2 :
  counter-increment: section 2;
• Ce compteur est ensuite augmenté de 1 à la première balise h1 avec l’instruction :
  counter-increment: section;
  A ce stade ce compteur vaut 3
• Sur la balise h1 (unique) on créer un autre compteur nommé subsection qui commence à 0 (par défaut) :
  counter-increment: subsection;
• Ce deuxième compteur sera ensuite augmenté de 1 à chaque balise h2 avec l’instruction :
   counter-increment: subsection;
• Pour afficher automatiquement ces compteurs, on utilise le pseudo-element :before et l’attribut content.

Compatibilité

L’attribut counter-increment est pris en charge par tous les principaux navigateurs .
A partir d’Internet Explorer 8.

Valeurs

Les différentes valeurs de l’attribut counter-increment sont:

none

Pas de compteur réinitialisé : valeur par défaut
Syntaxe :
counter-increment : none

nom nombre

Nom de compteur qui doit être incrémenté et la valeur d’augmentation pour chaque incrément (facultative : vaut 1 par défaut, peut avoir une valeur négative) .
Syntaxe :
counter-increment : section 1

initial

Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
counter-increment : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
counter-increment : inherit

A voir aussi

border box-sizing clip height width margin padding overflow max-width min-width counter-incrementresize