Número de inicio de una lista con CSS

01/Ene/2008 CSS 3 Comentarios

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 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 la etiqueta STYLE donde definiremos este estilo sobre el elemento OL.

  1. <style type="text/css">
  2. ol { ... }
  3. </style>

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:

  1. ol {
  2. counter-reset: item 2;
  3. }

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 donde se utiliza y cuando 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:

  1. li:before {
  2. content: counter(item) ". ";
  3. }

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:

  1. li:before {
  2. content: counter(item) ". ";
  3. counter-increment: item;
  4. }

Ahora solo nos quedará añadir nuestra lista ordenada a la página web, para ver el resultado del estilo:

  1. <li>Primer elemento</li>
  2. <li>Segundo elemento</li>
  3. <li>Tercer elemento</li>
  4. <li>Cuarto elemento</li>
  5. <li>Quinto elemento</li>
  6. </ol>

Vídeos sobre CSS


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

3 comentarios en “Número de inicio de una lista con CSS”

Víctor Cuervo

coto

y explorer??? si, ya se que ese navegador es una mierda, pero que le vamos a hacer

Víctor Cuervo

wiliam

codigo de counter para juegar con otro de otras sitios

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*