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

Hola a todos.

Les traigo un tip que realmente no es muy utilizado ya que 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 específicos, como :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 esto abría una posibilidad. Finalmente después de un par de pruebas, llegué a esto (no es visualmente lindo, ni fácil de leer 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…

Encuentra contenido relacionado en Tips