Fabbianz || Fabbian Álvarez
Fabbianz || Fabbian Álvarez

Tip: Simular selector :nth-child() en IE

Esto realmente no es muy usado, pues en la mayoría de las webs uno tiene control sobre las clases o elementos que quiere “pintar” con CSS, pero siempre podemos tener algún proyecto donde no podamos intervenir el HTML y debamos hacer uso de selectores un poco más especificos, como es el caso de :nth-child() que nos permite seleccionar individualmente elementos hijos (o varios con expresiones algebráicas del tipo 2n), el problema de esto es nuestro querido Internet Explorer, que no reconoce este selector.

Veamos un ejemplo de esto y como solucionarlo. Trabajando en el sitio de www.lider.cl necesitabamos modificar el menú y cada uno de sus items de forma individual, como ya comentamos esto es muy fácil con :nth-child() de manera que el selector quedaba de la siguiente manera:

 .menu li:nth-child(3){ … }

El problema, como dijimos es IE, por lo que la primera solución luego de googlear y no encontrar solución fue agregar via jQuery una clase para simular el selector, de manera que en IE podiamos asignar este selector:

 .menu li.nth-child-3{ … }

Ahora bien, esto solucionaba el problema, pero visualmente no quedaba del todo bien, pues mientras cargaba el JS del sitio el menú se veia mal y peor aún, en caso que el JS no cargara el menú jamás se ajustaría correctamente.

Leyendo la documentación de IE en el sitio de Microsoft, noté que el selector “+” es soportado por IE7 y 8, por lo que abría una posibilidad. Finalmente después de un par de pruebas, llegué a esto, no es visualmente lindo, ni fácil de entender pero funciona para todos los navegadores semidecentes (desde IE7 para arriba):

.menu li:first-child + li + li { … }

En este ejemplo le decimos al selector que desde la clase menú partiendo del primer LI vaya al siguiente LI y luego al siguiente (3er LI) y lo seleccione.

Eso es todo. Así que resumiendo, para simular de cierta forma el :nth-child(X) en IE7 y 8, debemos seleccionar un elemento y navegar por los X hermanos con el “+”.

Saludos!

Pd: Finalmente la versión con JS quedó para IE6…

  1. Teto dice:

    Muchas Gracias man, este temita del nth-child en IE me estaba dando bastante que hacer, tu explicacion me sirvio perfectamente! gracias nuevamente.!!

  2. admin dice:

    Gracias a ti, Teto! Un abrazo!

  3. […] Fuente: Tip: Simular selector :nth-child() en IE « Fabbianz || Fabbian Álvarez […]

  4. Yo uso selectivizr para todos mis flujos de trabajo. de hecho ya lo tengo incluido siempre q necesito soportar IE8- y me olvido de estos detalles.

    http://selectivizr.com/

  5. Fabbianz dice:

    Hola Jorge, llegué a esta solución tratando de evitar el uso de javascript en IE7 Y 8.
    De todas maneras es muy bueno tu aporte.

    Saludos!

  6. Fernando Hurtado dice:

    Muchas Gracias fue de gran ayuda tu post 🙂

  7. Fabbianz dice:

    😀 me alegro mucho!



Comentar: