Las listas ordenadas o tambien llamadas ordered list (
) nos generan listas ordenadas, empezando desde el 1. Ejemplo:
- Primero
- Segundo
- 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:
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»
<ol reversed="reversed">
<li>Cinco</li>
<li>Cuatro</li>
<li>Tres</li>
<li>Dos</li>
<li>Uno</li>
</ol>Con lo cual obtendremos:
- Cinco
- Cuatro
- Tres
- Dos
- Uno
