CSS - Pseudoclases

Las pseudoclases de CSS se utilizan para agregar efectos especiales a algunos selectores. No necesita usar JavaScript ni ningún otro script para usar esos efectos.

Las pseudoclases más utilizadas son las siguientes:

No.Valor y descripción
1:link

Use esta clase para agregar un estilo especial a un enlace no visitado.

2:visited

Use esta clase para agregar un estilo especial a un enlace visitado.

3:hover

Use esta clase para agregar un estilo especial a un elemento cuando pasa el mouse sobre él.

4:active

Use esta clase para agregar un estilo especial a un elemento activo.

5:focus

Use esta clase para agregar un estilo especial a un elemento mientras el elemento tiene el foco.

6:first-child

Use esta clase para agregar un estilo especial a un elemento que es el primer hijo de algún otro elemento.

7:lang

Use esta clase para especificar un idioma para usar en un elemento específico.

Al definir pseudoclases en un bloque <style>…</style>, se deben tener en cuenta los siguientes puntos:

  • a:hover DEBE ir después de a:link y a:visited en la definición de CSS para que sea efectivo.
  • a:active DEBE ir después de a:hover en la definición de CSS para que sea efectivo.
  • Los nombres de pseudoclases no distinguen entre mayúsculas y minúsculas.
  • Las pseudoclases son diferentes de las clases CSS pero se pueden combinar.

La pseudo-clase: link

El siguiente ejemplo muestra cómo usar la clase: link para establecer el color del enlace. Los valores posibles podrían ser cualquier nombre de color en cualquier formato válido.

La pseudo-clase: visited

El siguiente es el ejemplo que demuestra cómo usar la clase :visited para establecer el color de los enlaces visitados. Los valores posibles podrían ser cualquier nombre de color en cualquier formato válido.

Esto producirá el siguiente enlace. Una vez que haga clic en este enlace, cambiará su color a verde.

La pseudoclase: hover

El siguiente ejemplo demuestra cómo usar la clase :hover para cambiar el color de los enlaces cuando colocamos el puntero del mouse sobre ese enlace. Los valores posibles podrían ser cualquier nombre de color en cualquier formato válido.

Producirá el siguiente enlace. Ahora pasa el mouse sobre este enlace y verás que cambia su color a amarillo.

La pseudoclase: active

El siguiente ejemplo demuestra cómo usar la clase: active para cambiar el color de los enlaces activos. Los valores posibles podrían ser cualquier nombre de color en cualquier formato válido.

Producirá el siguiente enlace. Cuando un usuario hace clic en él, el color cambia a rosa.

La pseudo-clase: focus

El siguiente ejemplo demuestra cómo usar la clase :focus para cambiar el color de los enlaces enfocados. Los valores posibles podrían ser cualquier nombre de color en cualquier formato válido.

Producirá el siguiente enlace. Cuando este enlace se enfoca, su color cambia a naranja. El color vuelve a cambiar cuando pierde el foco.

La pseudo-clase: first-child

La pseudoclase: first-child coincide con un elemento específico que es el primer hijo de otro elemento y agrega un estilo especial a ese elemento que es el primer hijo de algún otro elemento.

Para hacer que: first-child funcione en IE, <!DOCTYPE> debe declararse en la parte superior del documento.

Por ejemplo, para sangrar el primer párrafo de todos los elementos <div>, podría usar esta definición:

La pseudoclase: lang

La pseudoclase de idioma :lang , permite construir selectores basados ​​en la configuración de idioma para etiquetas específicas.

Esta clase es útil en documentos que deben apelar a múltiples idiomas que tienen diferentes convenciones para ciertas construcciones de lenguaje. Por ejemplo, el idioma francés generalmente usa paréntesis angulares (< y >) para fines de citación, mientras que el idioma inglés usa comillas (‘ y ‘).

En un documento que necesita abordar esta diferencia, puede usar la pseudoclase: lang para cambiar las comillas apropiadamente. El siguiente código cambia la etiqueta <blockquote> apropiadamente para el idioma que se usa:

Los selectores: lang se aplicarán a todos los elementos del documento. Sin embargo, no todos los elementos utilizan la propiedad de comillas, por lo que el efecto será transparente para la mayoría de los elementos.