Propriété counter-set CSS

Page précédente counter-reset
Page suivante @counter-style

Définition et utilisation

counter-set Cette propriété est utilisée pour créer et définir un compteur CSS à une valeur spécifique.

counter-set Les propriétés sont généralement utilisées avec les propriétés counter-increment et content.

Exemple

Exemple 1

Créer un compteur ("my-counter"), le définir comme 5 et l'augmenter de 1 à chaque apparition du sélecteur <h2> :

body {
  /\* Définir "my-counter" comme 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* Incrémente "my-counter" de 1 */
  counter-increment: my-counter;
  content: "Section " counter(my-counter) ". ";
}

Essayez-le vous-même

Exemple 2

Créer un compteur ("my-counter"), le définir comme 5 et le diminuer de 1 à chaque apparition du sélecteur <h2> :

body {
  /\* Définir "my-counter" comme 5 */
  counter-set: my-counter 5;
}
h2::before {
  /\* Réduire "my-counter" de 1 */
  counter-increment: my-counter -1;
  content: "Section " counter(my-counter) ". ";
}

Essayez-le vous-même

Utiliser les formats "Section 10:\

body {
  /\* Définir "section" comme 9 */
  counter-set: section 9;
}
h1 {
  /* Définit "subsection" à 0 */
  counter-set: subsection 0;
}
h1::before {
  /* Incrémente "section" de 1 */
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
h2::before {
  /* Incrémente "subsection" de 1 */
  counter-increment: subsection;
  content: counter(section) ";" counter(subsection) " ";
}

Essayez-le vous-même

Exemple 4

Créez un compteur, définissez-le à 9 et augmentez-le de 1 à chaque apparition du sélecteur <h2> (en chiffres romains) :

body {
  /* Définit "my-counter" à 9 */
  counter-set: my-counter 9;
}
h2::before {
  /* Incrémente "my-counter" de 1 */
  counter-increment: my-counter;
  content: counter(my-counter, upper-roman) ";
}

Essayez-le vous-même

Syntaxe CSS

counter-set: none|counter-name number|initial|inherit;

Valeur de l'attribut

Valeur	Description
none	Valeur par défaut. Ne pas définir de compteur.
counter-name number	Nom du compteur à définir et sa valeur. Le compteur est réinitialisé à cette valeur chaque fois que le sélecteur apparaît. La valeur par défaut est 0.
initial	Réinitialise cette propriété à sa valeur par défaut. Voir initial.
inherit	Inherits cette propriété de son élément parent. Voir inherit.

Valeur par défaut :	none
Héritabilité :	Non
Réalisation de l'animation :	Non pris en charge. Voir :Propriétés liées aux animations.
Version :	CSS2
Syntaxe JavaScript :	object.style.counterSet="4"