Veteasabertu

Pseudo-clases en CSS

27 de Noviembre 2012
Pseudo-clases en CSS

Las pseudo-clases de CSS son de gran importancia a la hora de cuidar los detalles de una web, ya que son un paso más en la personalización de una plantilla.

El concepto en sí es más difícil de explicar que de implementar. Las pseudo-clases se utilizan para  personalizar elementos a los que no se puede acceder con las clases normales y que dependen de una principal. Lo mejor es verlas directamente explicando para qué sirve cada una y su sintaxis.

first-child

Es una pseudo-clase que va orientada a personalizar el primer elemento hijo de cualquier otro elemento. Por ejemplo, si tenemos un div y queremos aplicar estilos al primer párrafo de su interior.

En este caso, cuando un primer elemento hijo de la clase ejemplo sea un párrafo, el tamaño de la fuente será 90px. Sin embargo, si el primer elemento no es una p, no se aplicará la pseudo-clase.

link

Para aplicar estilo a los enlaces del portal que no han sido aún visitados podemos usar :link. De este modo los enlaces se distinguirán y sirven a modo de historial para el usuario.

El ejemplo mostrará los enlaces que aún no han sido visitados de color negro.

visited

Por contra al anterior, :visited se usa para referirse a los vínculos ya visitados por el usuario. Esto ayudará a la usabilidad, sobre todo cuando hay gran cantidad de contenido segmetado entre los enlaces.

Así pues, los enlaces se verán blancos una vez visitados, pudiendo distinguirse con mayor facilidad.

hover

Se aplica para el estado de un elemento cuando tienes el cursor encima, el clásico roll over.

Esto hará que al pasar el ratón por encima, el enlace pierda el subrayado típico de los vínculos. Pero hay que comentar que :hover se puede aplicar a cualquier elemento, además de los enlaces.

active

Mientras tenemos presionado del botón del ratón sobre un elemento, podemos definir que propiedades adoptará en ese instante.

Al presionar, la fuente pasará a verse en negrita y al soltar, volverá a su estado normal.

focus

Cuando un elemento tiene el foco, es decir se encuentra activo, bien a través del teclado, bien a través del ratón, podemos definir también sus características.

Cuando el input tenga el foco, el borde será de 1px, sólido y blanco. Una pseudo-clase que usaremos en la mayoría de los casos para darle un poco más de atractivo a los formularios.

Estas tres últimas, :hover, :active y :focus, se denominan pseudo-clases dinámicas de CSS, al requerir que el usuario interactúe con ellas.

lang

Sirve para aplicar estilos en función del idioma de un elemento. De este modo podemos variar los estilos según el lenguaje utilizado.

En el ejemplo, si el párrafo está en español se mostrará en negro. El problema viene al intentar determinar el lenguaje del texto, ya que el idioma se especifica en el head, lo que se aplica al documento entero. Habría que recurrir a añadir el idioma directamente en la etiqueta a través de HTML.

Para terminar, si quieres ampliar conocimientos sobre el tema, puedes leer nuestro artículo sobre los distintos tipos de selectores de CSS que existen y cuál es su utilidad.

Publicado por Jesús Tovar

Categorías: CSS

Etiquetas:

Un comentario

Pingback

  1. […] Para ver todo ello nada mejor que irnos al grano y ver todos los selectores que existen, su sintaxis y funciones. La siguiente tabla la he extraído y traducido al castellano de la guía de referencia CSS del portal w3schools, ya que es muy completa. Algunos de ellos ya los vimos al hablar de las pseudoclases. […]

Deja un comentario

Este sitio web utiliza cookies para mejorar la experiencia de usuario, si continúas navegando estás dando tu consentimiento. Para más información pincha aquí.

ACEPTAR
Aviso de cookies