Pseudo selector :nth-child. Columnas sin first-child ni last-child

Hace poco descubrí una forma avanzada de crear elementos en columna. sin tener que utilizar separadores entre filas o contenedores para cada una de ellas.

Se trata de la etiqueta :nth-child. Esta etiqueta nos da la opción de especificar cada cuanto deseamos que se ejecute un estilo.

Pongamos un ejemplo:

Pongamos que nos encontramos con un listado , el cual proviene de xml o algún otro tipo de fichero que no podemos controlar para dividir las filas.

  1. Crearemos el estilo de la mayoría de los lis de forma habitual
    ejem. ( li {color:#ccc;} )
  2. Y a continuación especificaremos los elementos que son diferentes. ejemplo (li:nth-child(3n+1) {color:#000;}). Aquí, lo que estaríamos diciendo es que después de cada 3 el primero (el 4º el 7º 10º …) va a ser negro.
  3. Si utilizásemos ejemplo ( li:nth-child(3n){color:red;}) estaríamos diciendo que cada 3 (el 3º, 6º, 9º etc.) fuese de color rojo.

Hack para IE (explorer)

Para solucionar el problema de nuestro “amadísimo” IE explorer (versión 8, pues el 9 parece que lo soporta) basta con lo siguiente:

Leave a comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *