Numeración inversa en Listas Ordenadas

Distintas formas y lenguajes para lograr una numeración inversa o decreciente en las listas ordenanas (ol): con Css, atributos Html o js

Numeración inversa en Listas Ordenadas

Por Kseso ✎ 9
Numeración inversa en Listas Ordenadas

Uno de los diferentes tipos de lista son las listas ordenadas (ordered list) representadas en el html por la etiqueta <ol> y sus únicos hijos directos marcados con <li>.
La principal característica de este tipo de lista es que sus items aparecerán numerados, si no se explicita lo contrario en el css, sin necesidad de incluir contadores css.

Esta autonumeración tiene una particularidad: que por defecto comienza asignando el dígito 1 al primer item y va incrementando una unidad en cada uno de los siguientes. Tal que así:

  1. Item
  2. Item
  3. Item

Numeración inversa en Listas OrdenadasPero ¿qué pasa si necesitamos o símplemente queremos alterar dicho orden para que la numeración sea a la inversa, esto es, descendiente en vez de ascendente?
Pues es algo demasiado sencillo, ya optemos por apoyarnos en Css o en los distintos atributos que admite el elemento ol.
Vamos, pues a verlos.

Numeración invertida en listas ordenadas con Css

Si eres un purista de Css, basta con el siguiente código:

ol { counter-reset: reversa 5; list-style: none; } li { counter-increment: reversa -1; } li:before { content: counter(reversa) ". "; }

Si te fijas en la primera regla ves que a continuación del nombre del contador (reversa) hay un número: 5. Esto es para indicarle que ese será el primer numeral a mostrar al que se le resta las unidades indicadas en la regla para los li.

Esto a priori tiene unos pequeños inconvenientes:

  1. Que deberías conocer de antemano el número de items de cada lista.
  2. Que cada lista computará en el conteo, así que si el número indicado es menor que el total de todos los li´s uno de ellos tendrá el dígito 0 y los siguientes -1, -2...

Así que para solventar ambos, sólo es cuestión de añadir en el html de cada lista el número inicial a partir del que se hace la cuenta atrás en función del número total de items y en el css el que vimos antes:

<ol class="inverso" style="counter-reset: reverso 6"> <li>Hola</li> <li>Mundo</li> <li>Desde</li> <li>El blog</li> <li>KsesoCss</li> </ol>

Piedes ver el resultado en este jsFiddle. Pincha el signo + para ver los códigos

Las listas ordenadas en las especificaciones Html

También podemos recurrir a los atributos admitidos para las listas ordenadas en los documentos del W3c.

El atributo reversed

Uno de ellos es el atributo reversed que nos permite lograr la numeración descendiente.
Este atributo es clasificado por la especificación como atributo booleano.
Es tan sencillo como:

<ol reversed> <li>Hola</li> <li>Mundo</li> <li>Desde</li> <li>El blog</li> <li>KsesoCss</li> </ol>

Y si utilizas un doctype XHTML la forma para que valide es reversed="reversed"

Para obtener lo siguiente:

  1. Hola
  2. Mundo
  3. Desde
  4. El blog
  5. KsesoCss

El atributo start

El atributo start estaba presente en viejas especificaciones de html, fue marcado como obsoleto (deprecated) en Html4 y de nuevo recogido en Html5.

Este atributo indica el valor inicial en la numeración de las listas. Así que en combinación con reversed podemos lograr una cuenta descendiente en las listas ordenadas a partir del número entero indicado en el valor del atributo start.

Lamentablemente, este atributo pese a su antigüedad sólo lo he visto funcionar en Chrome Canary

El atributo "value" en los li´s

Esta falta de soporte puede ser solventada utilizando el atributo value en cada item. Con él ocurre como con "start": recogido en viejas especificaciones, absoleto en Html4 y recuperado en Html5.
No te digo que optes por él, pero aquí queda su forma de uso:

<ol reversed> <li value=5>Hola</li> <li value=4>Mundo</li> <li value=3>Desde</li> <li value=2>El blog</li> <li value=1>KsesoCss</li> </ol>

Y ya que estamos con los atributos de las listas ordenadas, aquí dejo el tercero que admiten: type. Los valores admitidos son:

  • decimal: valores numéricos
  • lower-alpha: Alfabeto latino en minúsculas
  • upper-alpha: Alfabeto latino en mayúsculas
  • lower-roman: números romanos en minúsculas (i,v,x...)
  • upper-roman: números romanos en mayúsculas (L,C,D,M...)

Puedes ampliar la info sobre estos atributos en el documento del W3c

Una chuleta (polyfill) para reverse y start

En la búsqueda de información para este artículo encontré esta chuleta basada en javascript para utilizar tanto el valor reverse como start obra de Louis Lazaris:

A continuación este último ejemplo:

Créditos y atribuciones

Este artículo es deudor de:

  1. El post de Manuel Strehl en Manuel-strehl.de
  2. El post de Louis Lazaris en impressivewebs.com
  3. Entre otros muchos que puedes localizar tirando de @santo_buscador_que_más_te_guste

Artículo publicado originalmente en Diciembre de 2012.

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 9

  1. Llevaba tiempo buscando esta solución y no daba con ella, muchas gracias por la info, muy interesante.

    ResponderEliminar
  2. como se podría realizar una lista ordenada de la siguiente forma?
    1. xxxxx
    1.1 xxxxxx
    1.2 xxxxxx
    1.21 xxxxxxx
    1.22 xxxxxxx

    Gracias

    ResponderEliminar
    Respuestas
    1. Supongo que será

      1. xxxxx
      1.1 xxxxxx
      1.2 xxxxxx
      1.2.1 xxxxxxx
      1.2.2 xxxxxxx

      pero no veo la inversión de la lista en ningún lado. Son ol's anidados que están en cualquier tutorial, y los números están explicados también en varios. Seguro que en este blog también.

      ¿Seguro no te falta agregar nada a la consulta?

      :\

      Eliminar
    2. Eso se conoce como contadores CSS anidados, Guillermo
      Y tu caso está recogido y explicado en detalle en el artículo "Contadores Css y autonumeración automática. La propiedad Content"
      Concrétamente en el apartado "CounterS control de contadores anidados" (el penúltimo del post.

      Un saludo

      Eliminar
    3. Gracias, no lo había visto

      Un saludo

      Eliminar
  3. Yo estoy buscando una solución para una lista que necesito hacer, alguien me puede ayudar?
    EJEMPLO:

    1. Frutas
    a. plátano
    b. limón
    c. naranja
    2. Verduras
    a. jitomate.
    b. cebolla

    parrafo.... *(después del párrafo debo continuar con la numeración anterior)

    3. Semillas
    a. trigo
    b. maíz

    Muchas gracias!


    ResponderEliminar
    Respuestas
    1. ¿Te servirá 'counter-increment'? Estoy seguro de que hay documentación en este blog.

      Eliminar
    2. Hola Raúl
      Como bien te indica Furoya (gracias) eso (la numeraciones automáticas) es una tarea encomendada a los contadores CSS.

      En el comentario anterior al tuyo (el nº 2.2) tienes el enlace a un artículo dedicado a ellos.

      Como supongo que lo tuyo serán dos listas sólo tienes que crear un contador para la lista de primer nivel (las que les pones números) con list-style-type: decimal; y la de segundo nivel con el valor lower-latin o lower-alpha.
      Sin necesidad de resetear ninguno de los contadores para que sean incrementales.

      Si después de intentarlo no lo logras muéstranos tus códigos (crea un pen en codepen.io por ejemplo) y lo vemos.

      Un saludo

      Eliminar
    3. Eeeeh...
      8-|
      De nada… , pero debí suponer que tu respuesta iba a ser más completa que una mía.

      Yo también creo que el párrafo está entre dos 'ol'; no creo que lo meta entre dos 'li' (aunque funcione bien, con la sangría correspondiente y sin necesidad de renumerar).

      Un abrazo.

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap