Dentro de CSS las pseudo clases son palabras claves que se añaden a los selectores especificando el estado especial del elemento seleccionado. Las pseudo clases, junto con los pseudo elementos, permiten aplicar un estilo a un elemento no sólo en relación con el contenido del documento, sino también con relación a factores externos como el historial del navegador, el estado de su contenido, o la posición del ratón.
Estas son algunas de las pseudo clases más utilizadas dentro de CSS:
Pseudo clase :first-child
La pseudo-clase :first-child selecciona el primer elemento hijo de un elemento. Como en el ejemplo a continuación:
p em:first-child {
color: red;
}
<p>Lorem <span><em>ipsum dolor</em></span> sit amet, consectetuer adipiscing elit. Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim. Praesent nulla ante, <em>ultricies</em> id, porttitor ut, pulvinar quis, dui.</p>
El selector p em:first-child selecciona el primer elemento <em> que sea hijo de un elemento y que se encuentre dentro de un elemento <p>. Por tanto, en el ejemplo anterior sólo el primer <em> se ve de color rojo.
La pseudo-clase :first-child también se puede utilizar en los selectores simples, como se muestra a continuación:
p:first-child { ... }
La regla CSS anterior aplica sus estilos al primer párrafo de cualquier elemento. Si se modifica el ejemplo anterior y se utiliza un selector compuesto:
p:first-child em {
color: red;
}
<body> <p>Lorem <span><em>ipsum dolor</em></span> sit amet, consectetuer adipiscing elit. Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim.</p>
<p>Lorem <span><em>ipsum dolor</em></span> sit amet, consectetuer adipiscing elit. Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim.</p>
<div>
<p>Lorem <span><em>ipsum dolor</em></span> sit amet, consectetuer adipiscing elit. Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim.</p>
</div>
</body>
El selector p:first-child em selecciona todos aquellos elementos <em> que se encuentren dentro de un elemento <p> que sea el primer hijo de cualquier otro elemento.
El primer párrafo del ejemplo anterior es el primer hijo de <body>, por lo que sus <em> se ven de color rojo. El segundo párrafo de la página no es el primer hijo de ningún elemento, por lo que sus elementos <em> interiores no se ven afectados. Por último, el tercer párrafo de la página es el primer hijo del elemento <div>, por lo que sus elementos <em> se ven de la misma forma que los del primer párrafo.
Pseudo clases :link y :visited
Las pseudo-clases :link y :visited se pueden utilizar para aplicar diferentes estilos a los enlaces de una misma página:
- La pseudo-clase :link se aplica a todos los enlaces que todavía no han sido visitados por el usuario.
- La pseudo-clase :visited se aplica a todos los enlaces que han sido visitados al menos una vez por el usuario.
El navegador gestiona de forma automática el cambio de enlace no visitado a enlace visitado. Aunque el usuario puede borrar la caché y el historial de navegación de forma explícita, los navegadores también borran de forma periódica la lista de enlaces visitados.
Por su propia definición, las pseudo-clases :link y :visited son mutuamente excluyentes, de forma que un mismo enlace no puede estar en los dos estados de forma simultánea.
Como los navegadores muestran por defecto los enlaces de color azul y los enlaces visitados de color morado, es habitual modificar los estilos para adaptarlos a la guía de estilo del sitio web:
a:link { color: red; }
a:visited { color: green; }
Pseudo clases :hover, :active y :focus
Las pseudo-clases :hover, :active y :focus permiten al diseñador web variar los estilos de un elemento en respuesta a las acciones del usuario. Al contrario que las pseudo-clases :link y :visited que sólo se pueden aplicar a los enlaces, estas pseudo-clases se pueden aplicar a cualquier elemento.
A continuación se indican las acciones del usuario que activan cada pseudo-clase:
- :hover, se activa cuando el usuario pasa el ratón o cualquier otro elemento apuntador por encima de un elemento.
- :active, se activa cuando el usuario activa un elemento, por ejemplo cuando pulsa con el ratón sobre un elemento. El estilo se aplica durante un espacio de tiempo prácticamente imperceptible, ya que sólo dura desde que el usuario pulsa el botón del ratón hasta que lo suelta.
- :focus, se activa cuando el elemento tiene el foco del navegador, es decir, cuando el elemento está seleccionado. Normalmente se aplica a los elementos <input> de los formularios cuando están activados y por tanto, se puede escribir directamente en esos campos.
De las definiciones anteriores se desprende que un mismo elemento puede verse afectado por varias pseudo-clases diferentes de forma simultánea. Cuando se pulsa por ejemplo un enlace que fue visitado previamente, al enlace le afectan las pseudo-clases :visited, :hover y :active.
Debido a esta característica y al comportamiento en cascada de los estilos CSS, es importante cuidar el orden en el que se establecen las diferentes pseudo-clases. El siguiente ejemplo muestra el único orden correcto para establecer las cuatro pseudo-clases principales en un enlace:
a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }
Pseudo-clase :lang
La pseudo-clase :lang se emplea para seleccionar elementos en función de su idioma. Los navegadores utilizan los atributos lang, las etiquetas <meta> y la información de la respuesta del servidor para determinar el idioma de cada elemento.
Si se considera el siguiente ejemplo:
p { color: blue; }
p:lang(es) { color: red; }
Los párrafos del ejemplo anterior se ven de color azul, salvo los párrafos cuyo contenido esté escrito en español, que se ven de color rojo.
Como los navegadores actuales no son capaces de inferir el idioma de un elemento a partir de su contenido, el uso de esta clase está muy limitado salvo que la página utilice de forma explícita los atributos lang:
<p lang="en">Texto falso...</p>
<div lang="fr">
<p>Esto es un texto falso...</p>
<p lang="es_ES">Esto es un texto falso...</p>
</div>
<p lang="en">Esto es un texto falso...</p>
<ul>
<li lang="fr">Esto es un texto falso...</li>
</ul>
Aprende más sobre CSS
Ahora que sabes que son las pseudo clases en CSS. ¿Te gustaría conocer más herramientas y selectores para mejorar tus proyectos usando CSS y HTML?Con nuestro Bootcamp en Desarrollo Web podrás dominar esta y otras herramientas y tecnologías en menos de 7 meses. ¡Apúntate ahora!
