Pseudo clases CSS - link, visited, focus, hover y active

Las pseudo clases CSS permiten seleccionar elementos aplicando criterios que no es posible extraer directamente a partir del código fuente.

Pseudo clases CSS - link, visited, focus, hover y active | Aprender CSS | Las pseudo clases CSS permiten seleccionar elementos aplicando criterios que no es posible extraer directamente a partir del código fuente
COMPÁRTELO:

La pseudo clase más utilizada es, sin duda, la que permiten representar los diferentes estados de los hipervínculos:

/* muestra en azul los links no visitados */
a:link {
color: #006;
}

/* muestra en gris los links visitados */
a:visited {
color:#999;
}

/* muestra en rojo claro los links focalizados */
a:focus {
color: #f00;
}

/* muestra en rojo los links en hover */
a:hover {
color:#a00;
}

/* muestra en rojo claro los links activos */
a:active {
color:#f00;
}

Observe que las pseudo clases no se añaden con un punto sencillo al selector de elemento sino con dos puntos (:).

Las pseudo clases predeterminadas se pueden vincular con las clases definidas por el usuario:

a.azul:visited {
color: #006;
}

:link y :visited son pseudo clases link y sólo se pueden asignar al elemento ancla (<a>) :hover, :active y :active y :focus son pseudo clases dinámicas que, en teoría, se pueden asignar a cualquier elemento.

Con las pseudo clases para vínculos hay que tener en cuenta una particularidad, a saber, que el orden sea el correcto. Un orden adecuado de las instrucciones puede significar que un estado en particular no se evalúe nunca porque quede sobreescrito por alguno de los estados definidos a continuación.

Un orden seguro es el siguiente:

:link - :visited - :focus - :hover - :active

Las pseudo clases también se pueden combinar. En teoría, la siguiente instrucción también es posible:

a:focus:hover {…}

La instrucción se aplica cuando el vínculo está focalizado (con el teclado) y el puntero pasa sobre él.

Otra pseudo clase es la del idioma, que permite identificar un elemento en el que el idioma utilizado sea distinto al del resto del documento.

#selecccionidioma p:lang(es) {…}

La línea anterior significaría, por ejemplo, que el párrafo <p> dentro de #seleccionaIdioma se escribe en español

¿Te gustó o fue útil?

Ayúdanos a compartirlo en Redes Sociales
Compártelo:

Profesor en la Universidad de Guadalajara

Hugo Delgado Desarrollador y Diseñador Web en Puerto Vallarta

Profesional en Desarrollo Web y Posicionamiento SEO desde hace más de 10 años continuos.
Contamos con más de 200 constancias y reconocimientos en la trayectoria Académica y Profesional, incluidos diplomados certificados por Google.

TAMBIÉN MERECE LA PENA VISITAR:

¿Todavía no encuentras lo que necesitas?

Usa nuestro buscador interno para descubrir más información
Contenido patrocinado:

¿Te gustaría aprender más sobre Diseño Web?

Conoce las palabras y términos más comúnes usados en el Mundo de Internet para la World Wide Web
Glosario de Internet

1 Comentario en "Pseudo clases CSS - link, visited, focus, hover y active"

  1. Avatar usuario
    Jose

    Las pseudo clases permiten seleccionar elementos aplicando criterios que no es posible extraer directamente del código fuente.

 

Deja tu Comentario

PATROCINADOR

Tu negocio también puede aparecer aquí. Más información