Programación Web » Aprender CSS » Unidad 1. Aprender CSS:

Pseudo clases en CSS

Visto: 757

css

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

Artículos de navegación

Acerca del Profesor

Adrián Delgado Rodríguez

Ingeniero en Computación, docente por convicción y apasionado por la programación Web.

Actualmente trabaja como Profesor para en el Centro Universitario de la Costa de la Universidad de Guadalajara y como Desarrollador Web.

Síguenos:

 

Ver el perfil completo de Hugo Adrián Delgado Rodríguez (akus.net).

Deja un comentario

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




Diseño de páginas Web en Puerto Vallarta y Bahía de Banderas akus.net
subir

Síguenos en Facebook

Artículo de la semana

Cómo iniciar una página WebMetodología para la creación de sitios

Comprende las fases de Análisis, Planificación, Contenido, Diseño. ¿Qué método utilizas?