El elemento ol nos sirve, en HTML, para crear listas ordenadas. Es decir, los elementos van antecedidos de un número que indica su orden. Asignándole el número 1 al primer elemento de la lista. En este caso vamos a ver cómo podemos modificar el número de inicio de una lista con CSS.
En las primeras versiones de HTML, mediante un atributo podíamos modificar el valor de inicio de la lista. Posteriormente fue declarado como obsoleto y asignado al lenguaje CSS dicho cometido.
Para poder modificar el número de inicio de una lista con CSS tendremos que utilizar las propiedades de contadores counter-reset y counter-increment sobre el elemento ol.
Es por ello que dentro de nuestra página web definiremos dicho estilo. Para llevarlo a cabo utilizamos el elemento style donde definiremos este estilo sobre el elemento ol.
ol { ... }
Las propiedades counter-reset y counter-increment están ligadas directamente y deberán de aparecer ambas en la definición de estilos para poder llevar a cabo nuestro cometido.
counter-reset sirve para definir el contador, así como su valor inicial. Su sintaxis será la siguiente:
counter-reset: idcontador [entero]
Por defecto los contadores se inicializan a 1. Es por ello que el valor del entero (positivo o negativo) nos permitirá modificar el valor. De esta manera si queremos empezar por el número 3 en la lista, deberemos de incrementar en 2. Quedándonos el siguiente código:
ol {
counter-reset: item 2;
}
El nombre del contador puede ser cualquier identificador.
Pero como ya hemos dicho anteriormente, no nos sirve solo el inicializar el contador. Sino, que hay que indicar dónde se utiliza y cuándo incrementa.
Content, es la propiedad que nos sirve para indicar el contenido que va en un elemento. En este caso en el elemento li., el cual representa a cada uno de los items de la lista. Para volcar el contenido del contador utilizamos la función counter(idcontador).
En este caso el código quedará de la siguiente forma:
li:before {
content: counter(item) ". ";
}
Hay que indicar que utilizamos el pseudoelemento before, el cual indica que el contenido se aplica delante de la etiqueta. Y como se puede apreciar, no solo se vuelca el valor del contenido, sino que también se le añade un punto.
Lo siguiente será el indicar cuando se incrementa el contador. En este caso también se realiza sobre el elemento li. Para ello utilizamos la propiedad counter-increment, a la cual se le pasa como valor el identificador del contador que hay que incrementar y si fuese necesario, los valores del incremento.
La sintaxis de counter-increment es la siguiente:
counter-increment: idcontador [entero]
Finalmente nos queda el siguiente código sobre el elemento li:
li:before {
content: counter(item) ". ";
counter-increment: item;
}
Ahora solo nos quedará añadir nuestra lista ordenada a la página web, para ver el resultado del estilo:
<ol> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> <li>Cuarto elemento</li> <li>Quinto elemento</li> </ol>
De esta forma podremos comprobar que el Primer Elemento realmente empieza por el número 3 y así habremos conseguido modificar el número de inicio de una lista con CSS.
