JMiur [E]

Las pseudo-clases son "palabras" adicionales que agregamos en una definición CSS para establecer algún tipo de efecto especial. Los más conocidos son los que usamos en los enlaces y el orden en que colocamos esas definciones es importante:

a {color:white} /* los enlaces se muestran de color blanco */

a:link {color:white} /* son blancos si no los visitamos */
a:visited {color:green} /* se ponen verdes si ya los visitamos */
a:hover {color:red} /* cambian a rojo si colocamos el puntero del ratón encima */
a:active {color:yellow} /* son amarillos cuando están activos */

Tambien es posible usarlas definiendo clases o IDs:

a.ejemplo:hover {color:red}
a#ejemplo:hover {color:red}

Y eventualmente, podríamos aplicarlo a etiquetas que no sean enlaces:

Este es un DIV de ejemplo.

No son las únicas pseudo-clases, hay otras.

:first-child es un poco complicado de explicar. Lo que hace, es darle ciertas propiedades al primer elemento que se encuentra dentro de otro. Por ejemplo:
div#ejemplo img:first-child {border:2px solid red;}

<div id="ejemplo">
<img src="unaImagen" />
<img src="otraImagen" />
</div>
Lo que decimos con esta definición es que en un cierto DIV, la primera etiqueta IMG que aparezca tendrá un borde pero las siguientes no:


Hay variantes. Esto colocará en rojo, todos los textos en negrita de la primera etiqueta P que esten dentro de cierto DIV
div#ejemplo p:first-child b {color:red}

<div id="ejemplo">
<p>Esto será <b>rojo</b> y esto otro <b>también</b>.</p>
<p>Pero ninguno de <b>estos</b> se verá de color <b>rojo</b>.</p>
</div>

Esto será rojo y esto otro también.

Per ninguno de estos se verá de color rojo.


REFERENCIAS:w3.org

9 comentarios:

P@lm0 Sempai  

no lei bien el titulo me imagine que era pseudoblogger jejejeje

Responder
Graciela  

medio dormida JM veré si más tarde comprendo :D

Responder
Shark_Bloody  

Todo muy simple y fácil de aplicar, aunque, exceptuando a :hover, no les encuentro utilidad.

También están :lang y :focus, también sin utilidad.

Sin duda no esta de mas tenerlas en cuenta, para tener un conocimiento mas amplio del tema

Responder
JMiur  

P@lm0 Sempai: ¿pseudoblogger? Pués, no se me había ocurrido :D

Graciela: Paciencia.

Shark_Bloody: Son herramientas así que su utilidad, depende de nosotros mismos :D

Responder
Gem@  

Es una entrada muy didáctica, desconocía por completo el uso de first-child :S

Responder
Deybi  

Hola Jmiur.

Excelentísimo. Me ha resultado muy bien, puesto que modificando la plantilla muchas veces desconocemos esto y entonces cuando pasamos el mouse, o no se ve bien o simplemente no combina. Ahora con esto posible ponerlo a gusto.

¡Un gran saludo!.

Responder
JMiur  

Gem@:: Es algo que no se ve mucho pero, cada vez se usa más.

Deybi: Es bueno saberlo, de esa manera, todo se hace más sencillo.

Responder
Andybel  

.-La pseudoclase 'active' funciona solamente mientras se está clickando sobre el enlace en cuestión, brevemente.

.-Mi pregunta y rompecabezas de hoy es que quiero conseguir que el enlace en cuestión quede fijamente cambiado de color cuando selecciono una pestaña de categorías en la barra de navegación de mi blog 'Cosas y Casos, el blog de Andybel'.

.-He probado con pseudoclase 'focus' y creando clase '.activa' en el HTML para darle luego formato CSS y NADA DE NADA.

.-Tengo la cabeza como un bombo de tanto probar.

.-¿Puedes ayudarme? Gracias anticipadas desde el Mediterráneo español.

Responder
JMiur  

Supongo que lo que quieres es que ese item del menú quede marcado de cierto color cuando abres ese enlace, es decir, hago click en "Deportes" y queda marcado indicando que estás en ese tipo de página.

Si es así, eso no es posible con CSS porque deberías indicarle expresamente que en ciertas URL el menú se vea así.

Con :active, el enlace queda marcado sólo cuando haces click y se restaura a su estado normal u hover cuando termina el evento. Si quieres que permanezca con esas propiedades hasta que se cargue la nueva página, debes cambiarle la clase con JavaScript.

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