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