JMiur [E]

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 ]

¿Qué podemos hacer para identificar un elemento cualquiera o grupo de elementos dentro de otro sin tener que agregar datos adicionales? Para eso es que existen las pseudo-clases nth-child y nth-last.

20 comentarios:

Felipe Calvo Cepeda  

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 Martín Bardá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
Unknown  

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
Anónimo  

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
Manuel Alberto  

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 Martín Bardá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
Felipe Calvo  
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
Felipe Calvo  
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
Felipe Calvo  
Este comentario ha sido eliminado por el autor.
Responder
Anónimo  

:)

Responder
Neonius  

¿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 ...

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