Propriété CSS counter-increment

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>

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>

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.

Support de Navigateurs

2.0+ 12.0+ 1.0+ 3.1+ 9.2+


Trouvez-vous cela utile?

Articles Associées