Propriété CSS counter-increment

❮ Précédent Suivant ❯

La propriété counter-increment définit la volume d'augmentation des valeurs des compteurs. Cette propriété est utilisée avec les propriétés content et counter-reset.

La propriété counter-increment est spécifiée par deux valeurs: none et id numbers. "None" est la valeur initiale de cette propriété. C'est autorisé d'utiliser les valeurs négatives dans le cas de la valeur "id number". Initialement, le compteur est alors incrémenté de 1. Si l'id du compteur n'est pas initialisé par counter-reset, la valeur initiale est 0.

Valeur initiale	none
Appliquée à	Tous les éléments.
Héritée	Non.
Animable	Distincte.
Version	CSS2
Syntaxe DOM	object.style.counterIncrement = "subsection";

Syntaxe

counter-increment: none | id number | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
      /* "my-counter" to 0 */
      counter-reset: my-counter;
      }
      h2::before {
      /* "my-counter" by 1 */
      counter-increment: my-counter;
      content: "Section " counter(my-counter) ". ";
      }
    </style>
  </head>
  <body>
    <h2>HTML</h2>
    <h2>Tutoriel CSS </h2>
    <h2>Tutoriel JavaScript</h2>
    <h2>Tutoriel PHP</h2>
  </body>
</html>

Essayez-vous-même!

Un autre exemple où les sections et sous-sections sont numérotées.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
      /* Set "section" to 0 */
      counter-reset: section;
      }
      h2 {
      /* Set "subsection" to 0 */
      counter-reset: subsection;
      }
      h2::before {
      counter-increment: section;
      content: "Book " counter(section) ": ";
      }
      h3::before {
      counter-increment: subsection;
      content: counter(section) "." counter(subsection) " ";
      }
    </style>
  </head>
  <body>
    <h2>HTML</h1>
    <h3>Bases HTML</h2>
    <h3>Gabarits HTML</h2>
    <h3>Références HTML</h2>
    <h3>Tags HTML </h2>
    <h2>CSS</h1>
    <h3>Bases CSS </h2>
    <h3>Références CSS</h2>
    <h3>CSS Avancé</h2>
    <h3>Guides CSS </h2>
    <h3>Sélécteurs CSS </h2>
    <h3>Propriétés CSS </h2>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
none	Compteurs ne sont pas incrémentés. C'est la valeur initiale.
id number	Id définit quel compteur doit être incrémenté. Number définit la volume d'augmentation.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.