CSS - Propriété counter-increment

Description des propriétés counter-reset et counter-increment.

counter-reset crée et initialise un ou plusieurs compteurs.

counter-increment incrémente un ou plusieurs compteurs de la valeur indiquée.

Les compteurs sont utilisés pour numéroter des éléments (images, cellules de tableau, etc.). La valeur d'un compteur peut être insérée dans le document par la propriété CSS content.

Si une même règle utilise plusieurs propriété relatives à un même compteur, celles-ci sont traitées dans l'ordre suivant (quelque soit l'ordre dans lequel elles apparaissent) :

• En premier les initialisations (Object).
• Ensuite les incréments (Object).
• Enfin, l'utilisation des compteurs, c'est à dire l'insertion de leur valeur dans le document (avec la propriété Object).

Voici un exemple où deux propriétés sont appliquées au même compteur : le compteur cpt1 est initialisé avant d'être incrémenté, bien que cela ne corresponde pas à l'ordre des instructions.

Valeurs pourObject.

• counter-increment: none;

  Valeur par défaut. Aucun compteur n'est initialisé.

• counter-increment: nom-compteur 10;

  Un identifiant qui sera le nom du compteur, et une valeur numérique sans unité, positive, négative ou nulle. Ce deuxième valeur sera la valeur de départ du compteur. Ces deux informations sont séparées par un espace. Si la valeur de départ n'est pas indiquée, le compteur est initialisé à zéro.

• counter-increment: cpt1 10 cpt2 0;

  Cette syntaxe initialise deux compteurs : un premier compteur nommé cpt1 initialisé à la valeur 10, et un deuxième compteur nommé cpt2 initialisé à 0.

• counter-increment: inherit | initial | unset;

  Reportez-vous à la description générale de ces valeurs.

Valeurs pourObject.

• counter-increment: none;

  Valeur par défaut. Aucun compteur n'est incrémenté.

• counter-increment: nom-compteur 2;

  Un identifiant de compteur, et une valeur numérique sans unité, positive ou négative. Ces deux informations sont séparées par un espace. Le compteur dénommé nom-compteur est incrémenté de 2. Si la valeur de l'incrément n'est pas indiquée, le compteur est incrémenté de 1.

• counter-increment: cpt1 1 cpt2 -1;

  Cette syntaxe incrémente deux compteurs : un premier compteur nommé cpt1 est incrémenté de 1, tandis que le deuxième compteur nommé cpt2 est décrémenté de 1.

• counter-increment: inherit | initial | unset;

  Reportez-vous à la description générale de ces valeurs.

Exemples.

Cliquez sur les résultats ci-dessous pour afficher leur code CSS.

Dans ce premier exemple, la remise à zéro du compteur est faite par la balise hr (les lignes horizontales) et son incrément par les blocs div.

(1) Citations de Raymond Devos.

Ci-dessous nous savons utilisé deux compteurs : un pour les lignes, et un autre pour les cellules.

Voir aussi...

Ajout de contenu - Propriétés.

• content : Ajoute du contenu dans le document.
• counter-reset : Initialise un compteur.
• hanging-punctuation : Définit la ponctuation suspendue (caractères autorisés à déborder dans la marge).
• quotes : Caractères utilisés pour les guillemets.

Ajout de contenu - Directives.

• @charset : Indique le jeu de caractères utilisé dans la feuille de styles.
• @counter-style : Définition d'un compteur personnalisé.

Ajout de contenu - Fonctions.

• attr() : Renvoie la valeur d'un attribut.
• counter() : Renvoie la valeur actuelle d'un compteur.
• counters() : Renvoie la valeur d'un compteur hiérarchique.