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

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

Valeurs

Valeur	Description
nom	Nom du compteur. Un mot ordinaire (comme un nom de classe ou id). Il est possible de définir plusieurs noms, en les séparant par un espace. Dans ce cas, plusieurs compteurs seront modifiés simultanément.
pas	Nombre entier positif ou négatif. Paramètre facultatif.
`none`	Interdit l'incrémentation du compteur pour le sélecteur actuel.

Valeur par défaut : none.

Exemple

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

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

#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 :

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

#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 :

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

#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 :

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

#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 :

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

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

Voir aussi

la propriété counter-reset,
qui réinitialise la valeur du compteur à zéro