Incrementar items de una lista HTML de dos en dos

03/Ene/2008 CSS Deja un comentario
Ejemplos Programación CSS

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.

Vídeos sobre CSS


¿Algo que nos quieras comentar?

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

*