Reprise de numérotation par compteur CSS
Bonjour,
Je travaille actuellement sur un consulteur de données HTML5 (générées dynamiquement par XSL-T à partir de données XML).
Bien sûr la présentation de ces pages HTML est faite via CSS3.
Voici mon problème :
J'ai un type de document avec une structure arborescente numérotée.
La numérotation de ces éléments est faite grâce aux compteurs CSS.
Dans un cas précis (condition exclusive), on me demande de reprendre la numérotation, telle qu'elle était au niveau supérieur, en ignorant l'incrémentation qui a pu être faite entre temps.
Un exemple valant mieux qu'un long discours, voici ce dont j'ai besoin :
1. paragraphe 1
2. paragraphe 2
* SI bla bla bla
3. paragraphe 3
4. paragraphe 4
* SINON
3. paragraphe 5
4. paragraphe 6
5. paragraphe 7
Voici un extrait simplifié de mon code HTML :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <section class="procedure">
<p class="action">paragraphe 1</p>
<p class="action">paragraphe 2</p>
<section class="exclusiveConditions">
<section class="condition">
<p class="cond">SI bla bla bla</p>
<p class="action">paragraphe 3</p>
<p class="action">paragraphe 4</p>
</section>
<section class="condition">
<p class="cond">SINON</p>
<p class="action">paragraphe 5</p>
<p class="action">paragraphe 6</p>
<p class="action">paragraphe 7</p>
</section>
</section>
</section> |
Voici un extrait simplifié de mon code CSS :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| .procedure {
counter-reset: compt1 0;
}
.action::before {
content: counter(compt1) '. ';
}
.action {
counter-increment: compt1;
}
.exclusiveConditions {
margin-left: 2em;
}
.condition {
margin-top: 2em;
}
.cond::before {
content: '* ';
} |
Mais en l'état actuel, il n'y a pas de reprise de numérotation après le "SINON", et les paragraphes 5, 6, et 7 qui doivent être numérotés 3, 4, et 5, sont numérotés 5, 6, et 7.
Il est évidemment possible de réinitialiser le compteur à 2 sur les conditions comme ceci :
Code:
1
2
3
4
| .condition {
margin-top: 2em;
counter-reset: compt1 2;
} |
Mais je ne connais pas à priori le nombre de paragraphes numérotés avant les conditions exclusives ...
Autrement dit la réinitialisation à "2" est une inconnue.
Donc voilà ma question : quelqu'un voit-il une solution "pure CSS" (sans passer par du Javascript) ?
J'ai bien tenté quelque chose en utilisant les propriétés personnalisées CSS" (variables), mais sans succès.
Merci d'avance pour votre aide,
Lolo
