En este tip veremos cómo podemos aplicar estilos CSS de una manera más interactiva usando pseudo-clases y pseudo-elementos, que usaremos para aplicar propiedades específicas a los elementos con los que interactúa el usuario.
En los navegadores basados en el motor Gecko (como Mozilla y Opera), se puede usar la propiedad 'content' de CSS para añadir contenido (como veremos en el ejemplo, más adelante).
También en estos mismos navegadores, se puede usar el pseudo-elemento ':before' para seleccionar, como su nombre lo dice, un espacio antes a la etiqueta a la que se le pone ese pseudo-elemento.
Las pseudo-clases y pseudo-elementos no son nada mas que selectores, cada uno de ellos actúa según lo que el mismo diga. He aquí una lista de ellos:
Pseudo-elementos:
:first-letter : Actúa en la primera letra del elemento.
:first-line : Actúa en la primera linea del elemento.
:before : Actúa antes del elemento.
:after : Actúa después del elemento.
Pseudo-clases:
Las pseudo-clases deben serles mas conocidas, en ellas encontraremos cosas que tal vez ya hemos usado, como :hover ó :link. He aquí una lista de ellas:
:first-child : Actúa en la primera etiqueta que se encuentre del elemento seleccionado
:link : Actúa cuando el link no ha sido visitado.
:hover : Actúa mientras el mouse esta sobre el elemento.
:visited : Actúa cuando el link ha sido visitado.
:focus : Actúa mientras el elemento esta seleccionado.
:active : Actúa mientras el elemento esta activo.
La sintaxis para ambos es
Código :
elemento:pseudo-clase:pseudo-elemento { propiedad: valor }
Ahora veamos la utilidad real de esto. ¿Queremos hacer una lista con un carácter personalizado? No hay problema, buscamos nuestro carácter favorito, lo transformamos a HTML (Se puede obviar este paso, pero para asegurarnos de una correcta visualización los transformamos a HTML) y ponemos el siguiente código:
Código :
ul li:before { content: "/2A"; }
Daría como resultado una lista con unos lindos asteriscos.
Con esto, el logo de google ( ) se pondría despues de cada enlace ya visitado.
Asi, se puede ir jugando con los pseudo-elementos y pseudo-clases. Con ellos, por ejemplo, puedes hacer una letra capital, incluso puedes usar animaciones flash, sumando el uso de base64 a la mezcla .
Nota: Para usar base64 tienen que saber que es MIME y también, vean este post linkeado del blog de Lunatic.
Todavia no idea de usar base64, pero encuentro de lo más interesante los pseudo-elementos para aplicarlos en sustitución de algo que veo obligada a hacer y no me gusta (entre otras cosas...) La maldita etiqueta <span>, con un estilo concreto para una capitular o una frase destacada en un contexto.
Lastima lo de IE, sobre todo sabiendo que los simpáticos clientes siempre usan y usarán viejas versiones. Quién no tiene un cliente que todavía lo revisa todo en IE6?
Muchas gracias por tu tip! Me ha parecido muy interesante
) se pondría despues de cada enlace ya visitado.
.
no los kiere en su codigo.
