Hasta ahora hemos visto como trabajar con selectores básicos y combinadores, sin embargo, CSS ofrece más formas de seleccionar elementos HTML, y una de ellas son las llamadas pseudoclases.
Las pseudoclases se utilizan para hacer referencia a elementos HTML que tengan un cierto comportamiento concreto. Volvamos a recordar el esquema general de sintaxis de CSS, donde ahora añadiremos las pseudoclases, que se definen añadiendo dos puntos antes del nombre de la pseudoclase concreta, de la siguiente forma:
De esta forma, podremos seleccionar elementos que en principio parecen iguales, pero tienen diferentes características de comportamiento. Para entenderlo bien, vamos a ver las categorías o tipos de pseudoclases y ver cuales se encuentran entre ellas.
Existen múltiples pseudoclases, así que para entenderlas mejor, las categorizamos en las siguientes secciones. Aquellas que sean muy extensas o abundantes, las enlazaremos en un artículo posterior más detallado:
Pseudoclase | Más información |
---|---|
Interacción | Pseudoclases relacionadas con acciones de usuario. Ver más adelante en esta página. |
Ubicación | Pseudoclases relacionadas con enlaces o ubicaciones. Ver más adelante en esta página. |
Idioma | Pseudoclases relacionadas con idiomas. Ver más adelante en esta página. |
Estructura | Ver pseudoclases de estructura de documentos HTML |
Formulario | Ver pseudoclases de formulario HTML |
Estado | Pseudoclases relacionadas con el estado de modales o similares. Ver más adelante en esta página. |
Paginado | Ver pseudoclases de paginado de documentos HTML |
Veamos algunas de estas secciones a continuación.
Las pseudoclases de interacción se pueden utilizar en cualquier elemento, aunque lo más frecuente es usarlo en elementos interactivos como enlaces, botones o similares, y pueden seleccionar elementos cuando ocurre una cierta interacción por parte del usuario en ellos. ¿Qué tipo de interacción es esa? Pueden ser varias:
Pseudoclase | Descripción |
---|---|
:hover |
Selecciona el elemento si el usuario pasa el ratón sobre dicho elemento. |
:active |
Selecciona el elemento si el usuario se encuentra pulsando dicho elemento. |
:focus |
Selecciona el elemento cuando tiene el foco (está en primer plano). |
:focus-within |
Selecciona el elemento si uno de sus miembros hijos ha ganado el foco. |
:focus-visible |
Selecciona el elemento cuando tiene el foco sólo de forma visible (TAB, por ejemplo). |
:hover
La primera de ellas, :hover
, es muy útil e interesante, ya que permite aplicar estilos a un elemento justo cuando el usuario pasa el ratón (o más concretamente, un dispositivo apuntador) sobre él. Es una de las pseudoclases más utilizadas:
/* Usuario mueve el ratón sobre un enlace */
a:hover {
background-color: cyan;
padding: 2px
}
/* Usuario mueve el ratón sobre un div y resalta todos los enlaces que contiene */
div:hover a {
background-color: steelblue;
color: white;
}
Observese que podemos realizar acciones un poco más específicas, como el segundo ejemplo anterior, donde al movernos sobre un elemento div (div:hover), aplicaremos los estilos a los enlaces (a) que están dentro del mencionado div
.
:active
Por otro lado, la segunda pseudoclase, :active
, permite resaltar los elementos que se encuentran activos, o lo que es lo mismo, elementos que están siendo pulsados en ese instante con el ratón por el usuario:
a:active {
border: 2px solid #FF0000;
padding: 2px
}
Es importante destacar que esta pseudoclase no puede encargarse de detectar pulsación con persistencia, es decir, no guarda el estado de «ha sido pulsado», sino que sólo es capaz de detectar este comportamiento en el momento justo de ser pulsado. Si necesitamos persistencia, tendríamos que hacer uso de Javascript.
Nota: Aunque estas pseudoclases se inventaron para interactuar con un ratón en un sistema de escritorio, pueden llegar a funcionar en dispositivos táctiles. Aún así, ten en cuenta que el
:hover
no tiene demasiado sentido en el contexto de dispositivos móviles, ya que un usuario no navega por móvil arrastrando el dedo por la pantalla continuamente.
:focus
Cuando estamos escribiendo en un campo de texto de un formulario de una página web, generalmente pulsamos TAB para cambiar al siguiente campo y SHIFT+TAB para volver al anterior. Cuando estamos posicionados en un elemento, se dice que ese elemento tiene el foco, mientras que al pulsar TAB y saltar a otro, solemos decir que pierde el foco. También es posible ganar o perder el foco pulsando con el ratón en un elemento.
El comportamiento de «ganar el foco» puede gestionarse mediante la pseudoclase :focus
:
/* El campo ha ganado el foco */
input:focus {
border: 2px dotted #444
}
Estas pseudoclases suelen utilizarse con elementos de formularios como <input>
, <textarea>
o similares, pero también pueden utilizarse con otros elementos, como por ejemplo enlaces <a>
. Esta es una excelente oportunidad para personalizar el estilo de los campos de texto de un formulario (<input>
y <textarea>
) para que cambien cuando el usuario escribe y se mueve por ellos.
La pseudoclase :focus
tiene dos variaciones concretas, las explicaremos a continuación.
:focus-within
La pseudoclase :focus-within
permite darle estilo no sólo al elemento que tiene el foco, sino también a los elementos contenedores relacionados con el elemento que gana el foco. En este ejemplo, :focus-within
permite que cuando uno de los campos <input>
del formulario gane el foco, podamos iluminar también el elemento label, que es su contenedor:
<style>
form :focus-within {
background: yellow;
}
</style>
<form>
<label>Name: <input type="text"></label>
<label>Email: <input type="text"></label>
</form>
:focus-visible
En el caso de la pseudoclase :focus-visible
es prácticamente idéntico a :focus
, solo que podemos aplicar estilos al elemento que gana el foco, pero sólo cuando se ha ganado el foco exclusivamente de forma visible, como por ejemplo, pulsando la tecla TAB y accediendo al elemento. Esto puede resultar muy útil cuando quieres que el foco coincida con un tema visual para la página.
Existen algunas pseudoclases orientadas a los enlaces o hipervínculos. En este caso, permiten cambiar los estilos dependiendo del comportamiento del enlace:
Pseudoclase | Descripción |
---|---|
:any-link |
Selecciona un elemento que es un enlace. |
:link |
Selecciona un elemento que es un enlace no visitado aún. |
:visited |
Selecciona un elemento que es un enlace visitado anteriormente. |
:target |
Selecciona un elemento que coincide con el ancla de la URL actual. |
:any-link
Con la pseudoclase :any-link
se puede hacer referencia, como dice su nombre, a elementos que sean cualquier tipo de enlaces. En este caso, y si no se delimitan de alguna forma, incluye etiquetas <a>
y <area>
, ya que ambas se consideran enlaces.
:any-link {
background: indigo;
color: white;
padding: 5px;
}
:link
Por otro lado, la pseudoclase :link
permite seleccionar enlaces a páginas que aún no han sido visitadas por el navegador del usuario, lo que puede ser interesante para personalizar el color de este tipo de enlaces. Por defecto, estos enlaces sin visitar suelen ser de color azul.
Veamos un ejemplo donde los cambiamos:
a:link {
color: green;
font-weight: bold
}
:visited
También tenemos la pseudoclase :visited
, que se utiliza para seleccionar y dar estilo a los enlaces que hayan sido visitados previamente en el navegador del usuario. Por defecto, estos enlaces suelen ser de color violeta.
a:visited {
color: purple;
font-weight: bold;
}
:target
Con la pseudoclase :target
podemos seleccionar un elemento HTML donde su id
(ancla) coincida con el ancla que tenemos actualmente en la URL de navegación. Es decir, si en nuestra URL tenemos el ancla #section1
, entonces se seleccionará el elemento con id="section1"
:
:target {
background: gold;
color: #333;
padding: 5px;
}
Ideal para seleccionar cabeceras de secciones a modo de ancla en un documento HTML.
Pseudoclase | Significado | Más información |
---|---|---|
:lang(es) |
Selecciona elementos con el idioma español, es decir, atributo lang="es" . |
|
:dir(value) |
Selecciona elementos con la dirección indicada (ltr o rtl ). |
:lang()
El atributo HTML lang
permite indicar en una etiqueta HTML el idioma en el que está el contenido de sus elementos hijos. De esta forma, un atributo lang="es"
indica que el contenido de esa etiqueta se encuentra generalmente en español.
La pseudoclase :lang()
acepta por parámetro un idioma (o una lista de ellos separados por comas) para seleccionar el elemento HTML que coincida con uno de ellos:
/* Selecciona el elemento que tenga el idioma español */
:lang(es) {
/* ... */
}
/* Selecciona elementos que estén en español o inglés (*y relacionados*) */
:lang(es, es-*, en, en-*) {
/* ... */
}
Además, como se puede ver en el ejemplo anterior, también se pueden utilizar asteriscos a modo de comodín.
:dir()
La pseudoclase :dir()
permite seleccionar elementos dependiendo de la dirección que tienen establecida. Generalmente, la direccionalidad del texto se establece con el atributo dir
, indicándole el valor ltr
(left to right) o el valor rtl
(right to left), sin embargo, con valores como auto
o sin valores indicados, también tendrán una direccionalidad dependiendo del lenguaje establecido en el documento o fragmento.
:dir(ltr) {
border-left: 4px solid darkred;
}
:dir(rtl) {
border-right: 4px solid darkred;
}
Ten en cuenta que la diferencia entre :dir(ltr)
y [dir="ltr"]
es que en el primer caso se selecciona al elemento tanto si tiene el valor ltr
como si no lo tiene, pero lo hereda por contexto. Sin embargo, con [dir="ltr"]
sólo se selecciona si está indicado explícitamente.
Existen una serie de pseudoclases para comprobar el estado visual de un elemento que se considera modal, es decir, que «centran» la interacción del usuario en un elemento principal (y sus hijos) y no permiten la interacción con otros elementos hasta que se cierre ese elemento principal.
Estas pseudoclases son las siguientes:
Pseudoclase | Descripción |
---|---|
:fullscreen |
Selecciona si la página está en modo de pantalla completa. |
:modal |
Selecciona el elemento que es de tipo modal. |
Expliquemos un poco cada una de ellas.
:fullscreen
Mediante la pseudoclase :fullscreen
podemos seleccionar elementos que se encuentren en modo pantalla completa, lo que habitualmente se realiza mediante la API FullScreen de Javascript.
<div class="screen" open>
<p>Colocar esta ventana en pantalla completa</p>
<button class="close">Close</button>
</div>
<button class="open">FullScreen</button>
<script>
const button = document.querySelector(".open");
const close = document.querySelector(".close");
const screen = document.querySelector(".screen");
button.addEventListener("click", () => screen.requestFullscreen());
close.addEventListener("click", () => document.exitFullscreen());
</script>
<style>
.screen {
display: none;
}
:fullscreen {
display: block;
background: white;
border: 3px solid red;
}
</style>
:modal
Mediante la pseudoclase :modal
se puede seleccionar un elemento que está actuando como una ventana o elemento modal, o lo que es lo mismo, un elemento que centra la atención del usuario y no permite interacción con otros elementos que no son sus hijos.
En el ejemplo anterior, modificando :fullscreen
por :modal
continuaría siendo válido y funcionando porque un elemento a pantalla completa con .requestFullscreen()
también es un elemento modal, ya que no permite interacción con otros elementos fuera de él hasta que se cierre el modo pantalla completa.
También ten en cuenta que existe la posibilidad de que múltiples elementos sean modales, aunque sólo uno de ellos sea el que se encuentre activo y capaz de recibir interacciones.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev