JMiur [E]

Una de las novedades menos conocidas del futuro CSS3 son las pseudo-clases que se van sumando a las existentes.

Las pseudo-clases son "palabras" adicionales que agregamos en una definición CSS para establecer algún tipo de dato especial y tal vez, la más conocida es :hover [ 1 2 3 ]

Hay una en particular llamada nth-child que jamá había escuchado nombrar y me ha maravillado. Lamentablemente, no funciona en Internet Explorer aunque lo hace en el resto de los navegadores modernos: Firefox 3.5, Safari, Opera y Chrome.

Lo que hace es identificar un elemento dentro de una lista de etiquetas. Por ejemplo, si pusiéramos una serie de párrafos dentro de un DIV:

<div id="ejemplo">
<p> [ PARRAFO 1 ] </p>
<p> [ PARRAFO 2 ] </p>
<p> [ PARRAFO 3 ] </p>
<p> [ PARRAFO 4 ] </p>
</div>
y definimos estos estilos identificando cada párrafo con un número índice:
#ejemplo p:nth-child(1) { color: LightCoral; }
#ejemplo p:nth-child(2) { color: AliceBlue; }
#ejemplo p:nth-child(3) { color: GreenYellow; }
#ejemplo p:nth-child(4) { color: Gold; }
Veríamos esto:

p:nth-child(1) { color: LightCoral; }

p:nth-child(2) { color: AliceBlue; }

p:nth-child(3) { color: GreenYellow; }

p:nth-child(4) { color: Gold; }


Hasta acá no parece nada del otro mundo pero, lo interesante es que podemos identificar los elementos con algún tipo de argumento más sofisticado, por ejemplo:
#ejemplo p:nth-child(2n+1) { /* propiedades */ }
establecería las propiedades de todos los párrafos impares y:
#ejemplo p:nth-child(2n) { /* propiedades */ }
establecería las propiedades de todos los párrafos pares:

nth-child(2n+1) = IMPARES 1 3 5 7nth-child(2n) = PARES 2 4 6
  • el primer item de la lista
  • el segundo item de la lista
  • el tercer item de la lista
  • el cuarto item de la lista
  • el quinto item de la lista
  • el sexto item de la lista
  • el septimo item de la lista
  • el primer item de la lista
  • el segundo item de la lista
  • el tercer item de la lista
  • el cuarto item de la lista
  • el quinto item de la lista
  • el sexto item de la lista
  • el septimo item de la lista

Algunos ejemplo más aplicados a una lista:


nth-child(3) identifica al tercer elemento
  • el primer item de la lista
  • el segundo item de la lista
  • el tercer item de la lista
  • el cuarto item de la lista
  • el quinto item de la lista
  • el sexto item de la lista
  • el septimo item de la lista
ul#milista li:nth-child(3) {
background-color: #6495ED;
font-weight: bold;
text-transform: uppercase;
}


nth-child(2n+1) identifica a los elementos impares [ 1 3 5 7 ]
  • el primer item de la lista
  • el segundo item de la lista
  • el tercer item de la lista
  • el cuarto item de la lista
  • el quinto item de la lista
  • el sexto item de la lista
  • el septimo item de la lista
ul#milista li:nth-child(2n+1) {
background-color: #789;
color: #FFF;
}


nth-child(3n+1) identifica a los elementos 1 4 y 7
  • el primer item de la lista
  • el segundo item de la lista
  • el tercer item de la lista
  • el cuarto item de la lista
  • el quinto item de la lista
  • el sexto item de la lista
  • el septimo item de la lista
ul#milista li:nth-child(3n+1) {
background-color: #000;
border: 2px solid #456;
color: #DEF;
font-size: 18px;
}

20 comentarios:

Felipe  

Wow... excelente... nos ahorrará muchísima línea de código en caso que necesitemos diferenciar cierta cantidad de elementos ordenados, pero aún me queda la duda, el valor numérico (o la expresión algebráica) que le das a la clase reconoce automáticamente las etiquetas de cada bloque Div, es decir si tengo
<div id='cualquiera'>
<img src='' .../><br/>
<br/>
<p>Bla bla bla</p>
</div>

El automáticamente ignora esas etiquetas "nulas" por decirlo así como los saltos de línea, los <hr/> y demás, o solo aplica a ciertas etiquetas?

Muy interesante...

Responder
egoloco  

Se me ocurre.... diferenciar los comentarios con esto... es una lista numerada, sirve?

Responder
JMiur  

Felipe:
Habría que probar pero, así, en teoría, diría que no, que sólo identificará listas de etiquetas iguales. De todas formas, etiquetas com BR y HR son reemplazables con CSS y me imagino que todo dependerá de cada caso en particular.

egoloco:
Sí. en cualqueir tipo de etiqueta, no solo en las listas.

Responder
Antonio H. Martín  

A ver, JMiur, si me explico bien:

En mi blog "Cuaderno Nocturno" ( http://dunsany8.blogspot.com ), me ha surgido un problemilla: y es que anoche, al redimensionar la imagen de mi última entrada, toda la barra lateral (o sidebar) se me ha descolocado, y en lugar de ser lateral se ha ido al sótano, abajo del todo, al final de la página.
Cuando le doy a "configuración" lo veo todo correctamente, con la sidebar a la izquierda, pero en el blog no se ve así, sino abajo, con lo que el blog ha perdido su anterior estética.
Y además me han desaparecido, como por encanto, varios de los gadgets que tenía puestos, como un reloj, un geomap y el contador de visitas...
No entiendo qué puede tener que ver lo que ha pasado con el simple acto de redimensionar una imagen; el aumento fue mínimo.
¿Hay alguna posibilidad de modificar alguna cosa en la plantilla, para que todo vuelva a su sitio original?
Al ver el desastre volví la imagen a su anterior tamaño, pero la sidebar sigue abajo.
Lo mismo es un cambio de Blogger, pero no creo.
De antemano te agradezco cualquier ayuda que me puedas prestar.
Y por si acaso no quieres contestar aquí, te dejo mi dirección de mail: dunsany8@yahoo.com
Un saludo, maestro.

Antonio HM.

Responder
Graciela  

Una lástima :( hoy la energía viene bastante hija de Winiie de Pooh :X, no se carga, tiembla todo.

Un día bonito :)

Responder
JorG  

Huy que bueno esta eso, yo sabia que eso se podía hacer con Jquery pero con el CSS es mas sencillo

Responder
Gem@  

La nth-child se va a usar con fuerza tiene un resultado muy atractivo.
Te felicito por la elaboración de la entrada ha quedado genial :)

Responder
JMiur  

Antonio:
No veo nada de eso, veo la sidebar a la izquierda, creo que normal, tanto en IE como en Firefox ¿Sigues notando lo mismo?
Al redimensionar una imagen de un post, incluso poniendo valores gigantes, no deberías tener problemas de desconfiguración ya que las definiciones del CSS de tu plantilla son correctas, hay una (overflow:hidden) que hace justo eso, evitar que si el ancho de algo que colocas supera el ancho de la columna, esta se descompagine. Lo que hará es "cortarse" es decir, la verás sólo parcialmente.
Si lo que ocurrió es que la sidebar se fue para abajo, me da la impresión (es una suposición) que tal vez, había algún error en la sintaxis del post mismo y eso si puede provocar el problema que describes; lo que no veo, insisto, es que ahora esté mal.

Graciela:
Suele pasar :D

JorG:
Sin duda que si, el futuro se presenta interesante :D

Gem@
Es de lo mejor que he visto, muy útil, creo que tendrá muchas posibilidades; falta que la apliquen todos los navegadores :D

Responder
Manfenix  

Guardando este post en el cofre de herramientas.
Gracias por compartir, :)

Responder
JMiur  

Para eso los pongo, para tenerlos a mano yo mismo :D

Responder
Antonio H. Martín  

Gracias, JMiur, ya lo solucioné, por eso no lo has visto. El problema venía por un vídeo de Youtube que se cargó mal y descompaginó la sidebar. Nada más quitarlo todo volvió a su sitio. Y luego lo volví a cargar, pero de diferente manera, sin el "embed".
Gracias por tu atención.
Un saludo.

Responder
JMiur  

Era l oque me imaginé, Antonio, que el problema estaba en el post mismo. Me alegra que encontraras el error :D

Responder
Nico  
Este comentario ha sido eliminado por el autor.
Responder
JMiur  

Prueba agregarle la palabra !important

#vvv span:nth-child(1) {background-position:-245px -53px !important;}

Responder
Nico  
Este comentario ha sido eliminado por el autor.
Responder
JMiur  

Muchas de esas opciones del CSS3 son experimentales y los navegadores no las interpretan igual así que una cosa es lo que sugiera la w3org y otra distinta es lo que el navegador que uses ya tenga incorporado. Desconozco el tema.

Lo de los ultimos comentarios, es tal cual. Es un problema general o pro lo menos, lo bastante amplio como para abarcar a cuanto blog he visto en las últimas horas.

Responder
Nico  
Este comentario ha sido eliminado por el autor.
Responder
Madara Uchiha  

:)

Responder
Indeziisoow  

¿Se puede hacer esto con una tabla?

JMiur  

Sí, se puede aplicar a tablas.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR