Propriété counter-increment

La propriété counter-increment définit la numérotation automatique des éléments, par exemple, des paragraphes ou des titres. Elle est utilisée conjointement avec la propriété counter-reset, les pseudo-éléments after et before, la propriété content, à l'intérieur de laquelle la fonction counter est utilisée. Pour une meilleure compréhension, je recommande de regarder les exemples.

Syntaxe

csssélecteur {
  counter-increment: nom [pas] | none;
}

Valeurs

Valeur par défaut : none.

Exemple

Faisons en sorte que les paragraphes soient numérotés automatiquement :

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test;
  content: counter(test);
}

Результат:

Exemple

Supposons qu'en plus de la numérotation, un texte quelconque soit ajouté. Dans notre cas, № avant le chiffre et un point après :

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test;
  content: "№" counter(test) ".";
}

Результат:

Exemple

Commençons la numérotation à partir de 10. Pour cela, nous définissons la valeur initiale du compteur à neuf, c'est-à-dire à 1 de moins que ce dont nous avons besoin :

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test 9;
}
#parent p::before {
  counter-increment: test;
  content: "№" counter(test) ".";
}

Результат:

Exemple

Supposons maintenant que la numérotation se fasse avec un pas de "2". Pour cela, nous mettons deux comme pas :

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test 2; /* on met deux */
  content: "№" counter(test) ".";
}

Результат:

Exemple

Dans l'exemple précédent, la numérotation a commencé à partir de deux, alors que nous souhaitions à partir de un. Pourquoi cela s'est-il produit ? Parce que counter-reset réinitialise la valeur du compteur à zéro, puis counter-increment ajoute son pas : par défaut un, c'est pourquoi auparavant notre numérotation commençait à partir de 1. Mais maintenant deux est ajouté - et la numérotation commence à partir de deux.

Pour corriger le problème, définissons la valeur initiale du compteur à -1 et maintenant la numérotation commencera à partir de 1 et augmentera de 2 :

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test -1;
}
p::before {
  counter-increment: test 2;
  content: "№" counter(test) ".";
}

Результат:

Voir aussi