Numérotation des listes ordonnées

Reprise de la numérotation du parent ================================================================================

<ol>
    <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
                <ol>
                    <li>Item 2.2.1</li>
                    <li>Item 2.2.2</li>
                </ol>
            </li>
            <li>Item 2.3</li>
        </ol>
    </li>
</ol>

Code HTML d'une liste ordonnée hiérarchisée classique.

Si nous avons une liste ordonnée hiérarchisée, la numérotation de chaque liste va repartir à 1 à chaque niveau. Nous souhaiterions que les sous-listes reprennent 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 :

aux compteurs et aux différentes règles qui leur sont liées : counter-reset pour remettre à zéro, counter-increment pour incrémenter.
le pseudo-élément :before qui permet d'insérer un contenu au début d'un élément HTML.

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

Démonstration

<ol class="renumbered">
    <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
                <ol>
                    <li>Item 2.2.1</li>
                    <li>Item 2.2.2</li>
                </ol>
            </li>
            <li>Item 2.3</li>
        </ol>
    </li>
</ol>

Code HTML.

.renumbered, 
.renumbered ol {
    counter-reset: ct;
    margin: 0;
}
.renumbered li {
    list-style-type : none;
}
.renumbered li:before {
    color: #99a;
    text-align: right;
    content: counters(ct, ".")". ";
    counter-increment: ct;
}

Code CSS.

Numérotation inversée ================================================================================

Le HTML5 fournit un mécanisme pour numéroter les listes à puces ordonnées en ordre inversé. Pour obtenir le même effet avec les navigateurs ne supportant pas cette propriété, nous devons utilisé un attribut des éléments li, value, qui est déconseillé depuis HTML 4.01. La propriété CSS counter ne permettant pas de créer une décrémentation, c'est la seule technique envisageable.

Démonstration

<ol reversed="reversed">
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
    <li>Item D</li>
    <li>Item E</li>
</ol>

Code HTML d'une liste à puces ordonnées en ordre inversé.

/**
 * Fonction permettant de numéroter en ordre inversé les listes à puces
 *  ordonnées portant la classe 'reversed' présente dans le document courant.
 */
var reversedOl = function ()
{
    var 
    /**
     *  Lancer le traitement des listes à puces ordonnées en ordre inversé
     *  pour les navigateurs web ne supportant pas la fonctionnalité.
     */
    run = function () {
        var ols = document.getElementsByTagName('ol'),
            i = 0,
            n = ols.length;
        for (; i < n; i++) {
            if (ols[i].getAttribute('reversed')) {
                process(ols[i]);
            }
        }
    },
    /**
     *  Traiter une liste à puces ordonnées pour appliquer un ordre inversé.
     *  @param {HTMLOlElement} list Liste à traiter.
     */
    process = function (list) {
        var n = list.children.length - 1,
            idx = 1, 
            i = 0;
        for (i = n; i > -1; i--) {
            list.children[i].setAttribute('value', idx);
            idx++;
        }
    };
    
    if (!('reversed' in document.createElement('ol'))) {
        run();
    }
};

Code javascript.

Historique ================================================================================

2013-03-23

upd: Fusion des 2 ressources en une seule.

2009-10-25

add: Liste à puces ordonnées hiérarchisées renumérotées.

2008-04-25

add: Liste à puces ordonnées inversée.

Références ================================================================================

chapter: 12.4 Automatic counters and numbering

chapter: 10. Les listes