Discussion :

[lolotibo35]

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

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

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

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

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

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

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

[psychadelic]

J ne crois pas que ce probleme puisse se régler uniquement en css.

par contre tu peux "peut-être" t'écrire cette "feature" en écrivant un wrapper css.

[Invité]

Bonjour,

Une autre solution :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.procedure {
    counter-reset: compt1 0;
}
 
.procedure > .action {
    counter-increment: compt1;
}
.procedure > .action::before {
    content: counter(compt1) '. ';
}
 
.procedure > .exclusiveConditions {
    counter-reset: compt2 0;
    margin-left: 2em;
}
.condition {
    margin-top: 2em;
}
.procedure .exclusiveConditions .condition {
    counter-reset: compt2 0;
}
.procedure .exclusiveConditions .condition .action {
    counter-increment: compt2;
}
.procedure .exclusiveConditions .condition .action::before {
    content: counter(compt1) '-'counter(compt2) '. ';
}
 
.cond::before {
    content: '* ';
}

[lolotibo35]

Bonjour et tout d'abord merci de vous être penchés sur mon cas.

Psychadelic, je ne comprends pas ce que tu entends par un wrapper CSS.
J'ai fait une recherche sur le web et je ne vois pas comment cela peut m'aider.

Jreaux62, ta solution ne fonctionne pas : ça donne 2-1, 2-2, ... au lieu de 3, 4, ...
J'avais bien pensé, moi aussi à introduire un second compteur et à l'additionner au premier, mais impossible de combiner la fonction calc() et les compteurs CSS.

[Invité]

C'est pour ça que je parle d'"Une autre solution".
Et elle fonctionne très bien.

Ta numérotation n'est pas logique.

[psychadelic]

un wrapper c'est comme un polyfill sauf que c'est un code qui n'est pensé que pour ton site.

et je pense aussi (comme jreaux62) que ta numérotation n'est pas logique.
je pense aussi que tu devrai utiliser des listes plutôt que des paragraphes, question de respect de balise et d'emploi correct des styles css,
sans négliger le fait que les listes savent gérer seules des compteurs