Propriété CSS counter-increment

La propriété counter-increment définit de combien les valeurs des compteurs doivent augmenter ou diminuer. Cette propriété est utilisée avec les content et counter-reset propriétés.

La propriété counter-increment est spécifiée par deux valeurs : none et des identifiants numériques. none est la valeur par défaut de cette propriété. Elle permet d'utiliser des valeurs négatives dans le cas d'un "identifiant numérique". L'incrémentation par défaut est de 1. Si l'identifiant du compteur n'est pas initialisé par counter-reset, la valeur par défaut est 0. La valeur du compteur peut être définie sur un nombre arbitraire à l'aide de la propriété counter-reset.

Valeur initiale	none
S'applique à	Tous les éléments.
Héritée	Non.
Animable	Discrète.
Version	CSS2
Syntaxe DOM	object.style.counterIncrement = "subsection";

Syntaxe

Syntaxe de la propriété CSS counter-increment

css

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

Exemple de la propriété counter-increment :

Exemple de la propriété CSS counter-increment

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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 Tutorial</h2>
    <h2>CSS Tutorial</h2>
    <h2>JavaScript Tutorial</h2>
    <h2>PHP Tutorial</h2>
  </body>
</html>

Try it Yourself »

Résultat

Propriété CSS counter-increment

Exemple de la propriété counter-increment avec des sections et sous-sections numérotées :

Propriété CSS counter-increment avec la valeur de sous-section

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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</h2>
    <h3>HTML Basics</h3>
    <h3>HTML Templates</h3>
    <h3>HTML References</h3>
    <h3>HTML Tags</h3>
    <h2>CSS</h2>
    <h3>CSS Basics</h3>
    <h3>CSS References</h3>
    <h3>CSS Advanced</h3>
    <h3>CSS Guides</h3>
    <h3>CSS Selectors</h3>
    <h3>CSS Properties</h3>
  </body>
</html>

Try it Yourself »

Exemple de la propriété counter-increment avec des numéros romains :

Exemple de la propriété counter-increment avec des numéros romains :

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        /* "my-counter" to 0 */
        counter-reset: my-counter;
      }
      h2::before {
        /* "my-counter" by 1 */
        counter-increment: my-counter;
        content: counter(my-counter, upper-roman) ". ";
      }
    </style>
  </head>
  <body>
    <h2>HTML Tutorial</h2>
    <h2>CSS Tutorial</h2>
    <h2>JavaScript Tutorial</h2>
    <h2>PHP Tutorial</h2>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description
none	Les compteurs ne sont pas incrémentés. Il s'agit de la valeur par défaut.
id number	L'identifiant définit quel compteur incrémenter. Le nombre définit de combien le compteur sera incrémenté.
initial	Définit la propriété à sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Pratique

Quel est le rôle de la propriété 'counter-increment' en CSS ?

Elle incrémente automatiquement un compteur à chaque appel.Elle est utilisée pour définir la couleur du texte.Cette propriété est uniquement responsable de la taille et de la mise en page.Elle est utilisée conjointement avec la propriété 'content' pour créer des éléments numérotés sans avoir à insérer manuellement les numéros intermédiaires.Elle définit le style de police.

Propriété CSS counter-increment ​

Syntaxe ​

Exemple de la propriété counter-increment : ​

Résultat ​

Exemple de la propriété counter-increment avec des sections et sous-sections numérotées : ​

Exemple de la propriété counter-increment avec des numéros romains : ​

Valeurs ​

Pratique ​

Propriété CSS counter-increment

Syntaxe

Exemple de la propriété counter-increment :

Résultat

Exemple de la propriété counter-increment avec des sections et sous-sections numérotées :

Exemple de la propriété counter-increment avec des numéros romains :

Valeurs

Pratique