Pseudo clases en CSS

Pseudo clases en CSS
COMPÁRTELO:

Las pseudo clases permiten seleccionar elementos aplicando criterios que no es posible extraer directamente del código fuente. 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

Compártelo:

Profesor de la Universidad de Guadalajara

Hugo Delgado Desarrollador y Diseñador Web en Puerto Vallarta

Profesional en Desarrollo y Posicionamiento Web 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.

ARTÍCULOS RELACIONADOS:

1 Comentario(s)

  1. Jose

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

Deja un comentario

Recomendado para ti:

Diferencia y evolución de HTML, XHTML y HTML5Diferencia y evolución de HTML, XHTML y HTML5

Los desarrolladores de XHTML 2 se perdieron en el intento, crearon un estándar filosóficamente puro pero prácticament...

Síguenos en Facebook