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árrafo
%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>
Pruébalo
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:
Campo 2:
</form>
</body>
Pruébalo
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