2.1 ¿Qué son las pseudo-clases?
Las pseudoclases se definen añadiendo dos puntos antes de la pseudoclase concreta. En el caso de existir selectores de etiqueta, id o clases, estas siempre se escribirán a su izquierda.
2.2 Ejemplos de Pseudo-clases
Existen un sinfín de pseudoclases, a continuación te enseñaré algunos ejemplos:
:link
Con esta pseudo-clase, le aplicamos estilo a un link que aun no hemos visitado. En el siguiente ejemplo, si aún no has visitado la web de mab55.com, el enlace te debe de aparecer de color rojo.
a:link{
color: red;
}
:visited
Con esta pseudo-clase, le aplicamos estilo a un link que aun ya hemos visitado. Con este ejemplo, si ya has visitado almenos una vez la web de mab55.com, te debe de aparecer el enlace de color rojo.
a:visited{
color: red;
}
:active
Con esta pseudo-clase, le aplicamos estilo cuando el usuario esté activando el elemento (pulsando el ememento). Generalmente este tipo de pseudo-clase, se usa para los enlaces y botones. Con este ejemplo, si estás pulsando el enlace, te debe de aparecer el enlace de color rojo.
a:active{
color: red;
}
:hover
Con esta pseudo-clase, le aplicamos estilo cuando el usuario pasa el ratón por encima. Generalmente este tipo de pseudo-clase, se usa para los enlaces y botones. Con este ejemplo, si pasas el ratón por encima del enlace, te debe de aparecer el enlace de color rojo.
a:hover{
color: red;
}
:focus
Con esta pseudo-clase, le aplicamos estilo cuando el usuario pone el foco sobre un elemento. Con este ejemplo, al pasar el foco sobre el enlace, se pone de color rojo.
a:focus{
color: red;
}
:enabled
Con esta pseudo-clase, le aplicamos estilo a un link que aun no hemos visitado. En el siguiente ejemplo, si aún no has visitado la web de mab55.com, el enlace te debe de aparecer de color rojo.
a:link{
color: red;
}
:disabled
Con esta pseudo-clase, le aplicamos estilo a los elementos de un formulario que no estén activados. En el siguiente ejemplo, el campo del apellido aparece con el texto rojo porque está desactivado.
a:link{
color: red;
}