soy Kseso y esto EsCSS

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.

avatar del Editor del blog
the obCSServer ᛯ 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 Kseso