Pseudoclases

El conjunto de selectores que estudiaremos en este artículo se conocen como pseudoclases Hay muchos y a menudo sirven para fines muy específicos. Una vez que sepas cómo usarlos, puedes echar un vistazo a la lista para ver si alguno sirve para la página que quieres crear.

¿Qué son las pseudoclases?

Una pseudoclase se usa para definir un estado especial de un elemento.
Por ejemplo, se puede utilizar para:

Aplicar estilo a un elemento cuando un usuario pasa el mouse sobre él
Estilo de enlaces visitados y no visitados de manera diferente
Aplicar estilo a un elemento cuando se enfoca

Sintaxis

La sintaxis de las pseudoclases:

selector:pseudo-class
{
property: value;
}

Las pseudoclases son unas clases especiales, que se refieren a algunos estados del elemento HTML, las que se utilizan fundamentalmente son las que se aplican al elemento <a> (enlace).

La sintaxis varía con respecto al concepto de clase visto anteriormente ya que se tratan de pseudoclases predefinidas:

a:pseudoclase { propiedad: valor; }

Es decir separamos el nombre del elemento HTML con dos puntos.

Para el elemento HTML <a> tenemos 4 pseudoclases fundamentales:

link - Enlace sin ingresar
visited - Enlace presionado
hover - Enlace que tiene la flecha del mouse encima
active - Es la que tiene foco en ese momento (pruebe de tocar la tecla tab)

Es importante hacer notar que el orden en que definimos las pseudoclases es fundamental para su funcionamiento (debe respetarse el orden: link-visited-hover-active)

Este ejemplo es muy sencillo para ver el paso en los distintos estados que puede tener un enlace:

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<meta charset="UTF-8"> <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<a href="http://www.google.com">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.bing.com">Bing</a>
</body>
</html>

La hoja de estilo es:

a:link{
background-color:#00ff00;

color:#ff0000; }
a:visited{ background-color:#000000;
color:#ffffff;
}
a:hover{ background-color:#ff00ff;
color:#fffff;
}
a:active{ background-color:#ff0000;
color:#ffff00;
}

Apenas ejecute la página los tres enlaces deben aparecer de color rojo con fondo verde:

a:link{ background-color:#00ff00;
color:#ff0000;
}

Si presionamos la tecla tab podremos ver que el enlace que tiene foco aparece de color amarillo con fondo rojo:

a:active{ background-color:#ff0000;
color:#ffff00;
}

Si pasamos la flecha del mouse sobre algún enlace veremos que aparece de color blanco con fondo lila:

a:hover{ background-color:#ff00ff;
color:#fffff;
}

Por último todos los enlaces que hayamos hecho clic deberán aparecer de color blanco con fondo negro:

a:visited{ background-color:#000000;
color:#ffffff;
}

<!DOCTYPE html>
<html>
<head>
<style>
/* enlace no visitado */
a:link {
color: red;
}
/* enlace ya visitado */
a:visited {
color: green;
}
/* mouse sobre el enlace */
a:hover {
color: hotpink;
}
/* enlace selecionado */
a:active {
color: blue;
}
</style>
</head>
<body>
<h2>Enlaces CSS</h2>
<p><b><a href="index.php" target="_blank">Este es un enlace</a></b></p>
<p><b>Nota:</b> a:hover DEBE ir después de a:link y a:visited n la definición de CSS para que sea efectivo.</p>
<p><b>Nota:</b> a:active DEBE ir después de a:hover en la definición de CSS para que sea efectivo.</p>
</body>
</html>

Nota: a:hover DEBE ir después a:link y a:visited en la definición de CSS para que sea eficaz. a:activeDEBE aparecer después a:hover en la definición de CSS para que sea eficaz. Los nombres de pseudo-clases no distinguen entre mayúsculas y minúsculas.

><!DOCTYPE html>
<html>
<head>
v><style>
v>div {
background-color: green;
color: white;
padding: 25px;
text-align: center;
}
:hover {
background-color: blue;
}
iv></style>
</head>
<body>
<p>
Pase el mouse sobre el elemento div a continuación para cambiar su color de fondo:</p>
<div>Mouse sobre mi</div>
</body>
</html>

Ver ejemplo anterior