Cómo hacer Nth-child cross browser

Diseño web

Muchos de vosotros conoceréis el selector css “nth-child”, y los que no lo conozcáis, pues deberías! xD.

Nos permite decir adiós a tener que ir marcando en el html los típicos ‘odd’ y ‘even’ como class en nuestras tablas y listados. Un simple “nth-child(2n+1)” y fuera! Nos ahorramos un montón de trabajo.

Podéis ver mejor como funciona en este artículo: http://css-tricks.com/5452-how-nth-child-works/
El problema de esto, como siempre, es que no es cross browser, y es nuestro amigo IE quien no se entera de esta propiedad… 🙁 Incluso en IE8!!

Como dice al final del artículo, para solucionar este tema, es posible usar jQuery, y así es!
Con una línea de jQuery, podemos obtener los mismos resultados que con la css, pero para todos los navegadores!!

Y aquí viene el valor añadido sobre el artículo anterior… El ejemplo que nos aclarará como es la cosa:

Css:
<<table.myclass tr:nth-child(2n+1) { background-color: #F6F6F6; }>>

jQuery:
<<$(“table.myclass tr:nth-child(2n+1)”).css(“background-color”, “#F6F6F6”);>>

Espero que os sirva!

Publicado por: 0

Selectores en CSS2 y CSS3 – pseudo-classes

css

Hoy dejo un pequeño repaso de los selectores, pseudo-class y pseudo-elements para CSS2 y CSS3. Lo hago porque ultimamente he utilizado los clasicos :last-child y :first-child, pero buscando he encontrado otros también muy interesantes, sobre todo el :after y el :before.

CSS2:

* Selector niversal, son todos los elementos del CSS
E E representa cualquier elemento del tipo E (span, p, …)
E F Todos los elementos F que sean descendentes de E
E > F Todos los elementos F que sean hijos de E
E:first-child De esta forma podemos seleccionar el primer elemento de tipo E
E:last-child De esta forma podemos seleccionar el ultimo elemento de tipo E
E:link , E:visited Selecciona los elementos E que sean un enlaces y no hayan sido visitados (:link) y los si visitandos (:visited)
E:active , E:hover , E:focus Selecciona los elementos de tipo E , en sus correspondientes acciones.
E:lang(c) Cogemos los elementos del tipo E que estén en el idioma (humano) especificado en (c).
E + F Se trata de cualquier elemento F inmediatamente despues del elemento del tipo E
E[foo] Elementos del tipo E con el atributo foo
E[foo=”ejemplo”] Elementos del tipo E con el atributo foo igual a “ejemplo”
E[foo~=”ejemplo”] Elementos del tipo E con el atributo foo contenga “ejemplo”. Se pueden añadir varias palabras separadas por espacios. ( ~ =ALT + 0126)
E[lang|=”es”] Similar al anterior, pero se referirá a todos los elemento E tal que su atributo lang comienze por “es”. Por ejemplo: “es_ES”, “es_CA”,…
E[foo$=”ejemplo”] Elementos del tipo E en el que el atributo foo termine con “ejemplo”.
DIV.ejemplo Todos los elementos DIV que sean de la clase ejemplo
E#miID El elemento E en el que su ID sea igual miID
:first-line Se refiere a la primera línea del elemento, normalmente usado para para elemetos de texto.
:first-letter La primera letra del elemento, tambien suele usarse para elementos de texto.
:before Elemento usado para insertar algún contenido delante de un elemento.
:after Elemento usado para insertar algún contenido al final del elemento.

CSS3:

:nth-child(N) Se utiliza para tablas normalmente. N puede ser 5, 2n+1, 3n+3 …

ul li:nth-child(5) {
 color: #ccc;
}
ul li:nth-child(5) {
 color: #ccc;
}
tr:nth-child(2n+2) {background: #eee}

Conforme vaya encontrado más (que los hay), iré publicando más post.

Publicado por: 0