Pseudoclases en CSS
Pseudoselectores
Los pseudo selectores se representan con el símbolo ":" (dos puntos) y se colocan detrás de un elemento (etiqueta, identificador o clase). Tenemos dos tipos pseudoclases y pseudoelementos.
Pseudoclases
Pueden aparecer en cualquier elemento del selector (independiente de la herencia). Las pseudoclases representan el una acción realizada por el usuario. Las pseudoclases son :first-child, :link, :visited, :hover, :active, :focus y :lang.
El pseudoclase :first-child
elemento:first-child: Aplica estilos al primer elemento hijo de cualquier padre.
<!DOCTYPE html> <html> <head> <style> a:last-child { background-color:blue; color: white } </style> </head> <body> <p> <a href="enlace1.html">primer enlace del párrafoPruébalo
%lt;a href="enlace1.html">segundo enlace del párrafo
<a href="enlace1.html">Útimo enlace del párrafo </p> <div> <a href="enlace1.html">primer enlace de la capa
<p> <a href="enlace1.html">Primer y Útimo enlace del párrafo de la capa </p> <a href="enlace1.html">segundo enlace de la capa
<a href="enlace1.html">Útimo enlace de la capa </div> </body> </html>
El pseudoclase :link
:link: Se aplica a enlaces, y indica el estado cuando este no ha sido visitado. Ejemplo:<style> a:link { color:red; } a:visited { color: green} </style> </head> <body> <a href="http://www.google.com" > Google <a href="http://www.ebay.com" > Ebay <p> Si ha sido visitado el enlace será verde sino rojo </body>Pruébalo
El pseudoclase :visited
:visited: Se aplica a enlaces, y se refiere al estado cuando el enlace ya ha sido visitado.
Ejemplo:
<style> a:visited { background-color:blue; } </style> </head> <body> <a href="http://www.google.com">Google </body>Pruébalo
El pseudoclase :hover
:hover: Se refiere al estado cuando pasamos el ratón por encima de un elemento.
Nota: Tiene que ser definido después del :link y :visited para que sea efectivo.
Ejemplo:<style> p:hover {background-color:blue; } </style> </head> <body> <p>Al pasar con el ratón sobre este párrafo se ve el fondo azul </body>Pruébalo
El pseudoclase :active
:active: Se refiere al estado en el que el usuario hace clic sobre un elemento.
Nota: El atributo active debe estar definido después del selector :hover
Ejemplo:
<style> p:active { background-color:blue; } </style> </head> <body> <p>Al pinchar sobre este párrafo se ve fondo azul </body>Pruébalo
El pseudoclase :focus
:focus: Se refiere al estado de cuando un elemento obtiene el foco.
Nota: Para que funcione en IE8 hay que declarar el DOCTYPE.
<head> <style> input:focus { background-color:blue; } </style> </head> <body> <p>Pincha en las cajas de texto para ver como cambia el fondo: <form> Campo 1:Pruébalo
Campo 2: </form> </body>
El pseudoclase idioma :lang(idioma)
:lang: permite asignar estilos a un elemento dependiendo de su idioma.
Ejemplo:
<style> span:lang(fr) { background-color:blue; color:white; } q:lang(es) { quotes: "<<" ">>"; } q:lang(en) { quotes: '"' '"'; } </style> </head> <body> <p>Bonjour tienen fondo azul y texto blanco porque tienen el pseudo clase lang con valor fr: <p>Ambrose Bierce dijo (más o menos) que <q lang="es">una cita es una manera de repetir erróneamente las palabras de otros. <p>Ambrose Bierce dijo (más o menos) que <q lang="en">a quotation is the act of repeating erroneously the words of another. <span lang="es">Hola <span > Hello <span lang="fr"> Bonjour </body>Pruébalo