Discussion :

[albedo0]

Bonjour,

Je souhaite utiliser un counter CSS et le réinitialiser lorsqu'une autre classe est présente, mais lors de la réinitialisation je créé un nouveau compteur à la place :

Voici le code CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
body {
  counter-reset: num ;
}
.number {
  counter-increment: num;
}
.number::before {
  content: counters(num, ' - ');
}
.reset {
  counter-reset: num ;
}

et le

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="number">-</div>
<div class="number">-</div>
<div class="number">-</div>
<div class="number reset"> Reset</div>
<div class="number">-</div>
<div class="number">-</div>
<div class="number">-</div>

Voici une version fonctionnelle du code : https://jsfiddle.net/ab81qo5j/

Je vois bien que le counter-reset de la class .reset créé un nouveau compteur avec le même nom. J'ai bien noté que c'est une question de portée, mais là je n'arrive pas à comprendre le problème... Est-ce que quelqu'un est capable de m'aider ?

Merci par avance

[albedo0]

Je répond moi-même à la question.

Il suffit que d'enlever l'initialisation du compteur sur body...

[NoSmoking]

Bonjour,

Je vois bien que le counter-reset de la class .reset créé un nouveau compteur avec le même nom.

oui c'est le principe qui permet de numéroter les liste <ol> par exemple, il est donc important de conserver l'état/valeur du parent.

Par contre tu peux rencontrer des soucis d'interprétation entre les navigateurs.
Tu peux regarder du côté de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.reset {
/* counter-reset: num 0;/**/
  counter-set: num 1;
}

peut-être plus stable, mais inconnu pour IE.

[albedo0]

J'ai ajouté une réinitialisation sur le premier

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.number:nth-child(1) {
     counter-reset: num;
}

[NoSmoking]

Pourquoi ne pas utiliser une liste <ol> ou mettre un conteneur pour chaque groupe ?

[albedo0]

Ce n'est pas du tout le même usage, je souhaite numéroter des titres je ne vais pas faire de la bidouille avec des ol et je veux surtout que la numérotation s'adapte automatiquement.

En tout cas, avec counter-reset au bon endroit c impeccable !