CSS y HTML: Crear listas con numeración decreciente

por | Ago 20, 2015 | Otros

Las listas ordenadas o tambien llamadas ordered list (

    ) nos generan listas ordenadas, empezando desde el 1. Ejemplo:

    1. Primero
    2. Segundo
    3. Tercero

    Pero seguro que muchos alguna vez han querido tener una lista con la numeracion invertida, algo así:

    5. Item 1
    4. Item 2
    3. Item 3
    2. Item 4
    1. Item 5

    Para lograr esto lo haremos de dos maneras:

    Usando CSS

    Para ello basta con el siguiente código:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    ol {
      counter-reset: c 10;
      list-style: none;
    }
    li {
      counter-increment: c -1;
    }
    li:before {
      content: counter(c) ". ";
    }

    Si te fijas en el «ol» pusimos «counter-reset: c 10» eso nos indica que empezara desde el 10, la letra «c» es el nombre del contador, se puede poner al gusto de uno.

    En el «li» «counter-increment: c -1» con eso decrecerá en 1 por cada «li».

    Y en el «li:before» content: counter(c) «. » con esto pondremos el valor correspondiente.

    Aquí te dejo algunos ejemplos adicionales:

    Usando HTML

    Para ello nos valdremos del atributo «reversed»

    1
    2
    3
    4
    5
    6
    7
    <ol reversed="reversed">
        <li>Cinco</li>
        <li>Cuatro</li>
        <li>Tres</li>
        <li>Dos</li>
        <li>Uno</li>
    </ol>

    Con lo cual obtendremos:

    1. Cinco
    2. Cuatro
    3. Tres
    4. Dos
    5. Uno

    [social-download button_id=»a8357ad76c6889d3f» dl_id=»http://jsfiddle.net/oacu3o9r/1/» theme=»blue» message=»Comparte para ver el código usado.» facebook=»true» likeurl=»CURRENT» google=»true» googleurl=»CURRENT» tweet=»true» tweettext=» @xlogus» tweeturl=»CURRENT» follow=»true» linkedin=»true» linkedinurl=»CURRENT»/]