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.