Numérotation des listes ordonnées

Auteur
Nibau Rui
Date
Catégories
Web
Tags
,

Petite astuce CSS, toute simple et pas très neuve, pour obtenir des listes ordonnées hiérarchisées dont la numérotation reprend celle de l'item parent.

Comportement par défaut des listes ordonnées imbriquées

Supposons que nous ayons une série de listes ordonnées hiérarchisées décrites par le code HTML ci-dessous :

<ol class="count">
    <li>item 1
        <ol>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
        </ol>
    </li>
    <li>item 2
        <ol>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
            <li>Item 2.3</li>
        </ol>
    </li>
</ol>
Code HTML d'une série de listes ordonnées hiérarchisées.
  1. item 1
    1. Item 1.1
    2. Item 1.2
  2. item 2
    1. Item 2.1
    2. Item 2.2
      1. Item 2.2.1
      2. Item 2.2.2
    3. Item 2.3
Rendu par défaut de listes ordonnées hiérarchisées.

Reprise de la numérotation du parent

Nous souhaiterions que chaque sous-liste reprenne la numérotation de son item parent, que l'item « Item 1.1 » soit numéroté « 1.1 », que « Item 2.2.1 » soit numéroté « 2.2.1 », etc. Pour ce faire, il faut abandonner les puces de liste par défaut et construire nous même une incrémentation de puces numériques en CSS grâce :

Une implémentation dés plus simple pourrait ressembler à ceci :

.count, .count ol {
    counter-reset: ct;
    margin: 0;
}
.count ol {
    margin-left: 12px;
}
.count ol ol {
    margin-left: 24px;
}
.count li {
    list-style : none;
}
.count li:before {
    color: #99a;
    text-align: right;
    content: counters(ct, ".")". ";
    counter-increment: ct;
}
Code CSS pour modifier le puces numériques des listes.

A noter l'incrémentation progressive de la marge gauche des sous-listes : puisque la largeur du contenu du pseudo-élément :before grandit à chaque niveau hiérarchique, il faut l'augmenter en conséquence pour assurer un rendu homogène.

  1. item 1
    1. Item 1.1
    2. Item 1.2
  2. item 2
    1. Item 2.1
    2. Item 2.2
      1. Item 2.2.1
      2. Item 2.2.2
    3. Item 2.3
Listes ordonnées hiérarchisées reprenant la numérotation de l'item parent.

Oh, un dernier détail : cela ne fonctionne évidemment qu'avec un « vrai » navigateur web :-).

Références

BOS, Bert ; ÇELIK, Tantek ; HICKSON, Ian. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C, . 12.4 Automatic counters and numbering