Artículos
CSS

Incrementar items de una lista HTML de dos en dos

03/Ene/2008

Como pudisteis leer en el artículo «Número de inicio de una lista con CSS», la gestión de contadores en CSS nos permite alterar el comportamiento estándar de las listas ordenadas en HTML. En este caso vamos a ver como podemos incrementar items de una lista HTML de dos en dos.

Por defecto las listas ordenadas empiezan con el valor 1 y se van incrementando de uno en uno. Nos apoyaremos en la propiedad counter-increment para alterar este comportamiento.

La sintaxis de la propiedad counter-increment es la siguiente:

counter-increment: idcontador incremento

Por defecto, el valor de incremento es 1. Es decir, que si queremos que se incrementen de dos en dos tendremos que asignarle el valor de 2.

Quedándonos la definición del estilo sobre el elemento LI de la siguiente forma:

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

Si bien, tendremos que haber definido con anterioridad el valor de inicio del contador. Esto nos lo proporciona la propiedad counter-reset. Es por ello, que sobre el elemento OL definiremos el siguiente estilo:

ol {
  counter-reset: item -1;
}

El valor de -1 es para que la lista empiece realmente por 1. Ya que el incremento se aplicará a todos los elemento, incluido el primero de ellos. Entonces, al incrementar 2 al -1, tendremos que el primer elemento es el 1.

Código Fuente

Descárgate el código fuente de Incrementar items de una lista HTML de dos en dos
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
Suscribir
Notificar de
guest
0 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios