Las pseudoclases son un tipo de selector que permite aplicar estilos CSS para diferentes estados de los elementos HTML. Su gran utilidad es modificar el estilo dependiendo del comportamiento que un elemento pueda experimentar en determinado momento, como un enlace visitado.
La sintaxis de las pseudoclases es la siguiente: se escribe el nombre del selector que nos interesa a la izquierda, mientras que a su derecha se añade la palabra clave de la pseudoclase con el prefijo de los dos puntos (:).
selector:pseudoclase {
propiedad: valor;
}
Por ejemplo, vamos a cambiar el color de un enlace visitado. El selector del enlace será un selector general para apuntar al elemento <a> (por tanto: a), y la pseudoclase será :visited. Este es el resultado:
a:visited {
color: violet;
}
Hay varios tipos de pseudoclases, según la funcionalidad. En este artículo se clasifican a través de las siguientes categorías:
- Modificación de enlaces
- Relacionadas con la interacción
- Validación de campos
- Estilos según el idioma
- Posición de elementos
- Combinaciones lógicas
- Impresión (medios paginados)
Pseudoclases de enlaces
Las pseudoclases de enlaces están relacionadas con los enlaces, por lo que ayudan a cambiar su estilo dependiendo de su comportamiento. Por ejemplo, un enlace visitado se puede ver diferente de un enlace no visitado.
| Pseudoclase | Descripción |
|---|---|
:link | Aplica estilos al enlace mientras todavía no ha sido visitado. |
:visited | Aplica estilos al enlace cuando ya ha sido visitado. |
:hover | Aplica estilos al enlace cuando el ratón pasa por encima. |
:active | Aplica estilos al enlace mientras se está pulsando. |
La pseudoclase :link se puede aplicar a cualquier elemento de enlace (<a>) que tenga el atributo href con un valor válido y que, además, aún no haya sido visitado por el usuario en el mismo navegador web. Puede aplicarse estilos a los enlaces visitados con la pseudoclase :visited.
Mediante la pseudoclase :hover es posible aplicar un efecto diferente cuando el usuario pone el ratón encima del enlace; aunque puede aplicarse sobre cualquier elemento. Si se desea, también se puede aplicar estilos mientras se esté pulsando el enlace, y se logra con la pseudoclase :active.
El orden es importante
Debido a la especificidad que hace que las reglas CSS posteriores anulen las reglas anteriores, es necesario que estas cuatro pseudoclases referentes a los enlaces se encuentren en el orden correcto: :link, :visited, :hover y :active. Si no se mantiene ese orden, puede que no tengan el efecto esperado.
Es habitual declarar las reglas de la siguiente manera:
a:link {}
a:visited {}
a:hover {}
a:active {}
Pseudoclase de enlaces ancla
La pseudoclase de enlaces ancla es :target. Se trata de una pseudoclase que permite aplicar estilos CSS al elemento que tiene el atributo id cuyo valor coincide con el texto ancla de la URL. Por lo tanto, su utilidad está indicada en enlaces ancla, funcionalidad que tiene un gran potencial.
Pseudoclases de interacción
Las pseudoclases de interacción están relacionadas con los elementos de formularios, es decir, los controles interactivos del HTML.
| Pseudoclase | Descripción |
|---|---|
:focus | Aplica estilos al elemento cuando tiene el foco. |
:checked | Aplica estilos al elemento cuando está marcado. |
:enabled | Aplica estilos al elemento cuando está activado. |
:disabled | Aplica estilos al elemento cuando está desactivado. |
:read-write | Aplica estilos al elemento con contenido editable. |
:read-only | Aplica estilos al elemento con contenido no editable. |
:indeterminate | Aplica estilos al elemento cuyo estado sea indeterminado. |
:default | Aplica estilos al elemento que tiene el valor por defecto. |
La pseudoclase :focus permite aplicar estilos CSS al elemento HTML que tiene el foco, y puede utilizarse tanto en enlaces (elemento <a>) como en elementos de formularios (controles interactivos), como sería el caso de un <input>, un <select>, un <textarea> o incluso un <button>.
Que un control interactivo tenga el foco significa que el usuario o un código (automático) ha puesto el cursor dentro del elemento HTML, de modo que, si se trata de una caja de texto, ya puede escribirse texto. En general, si se presiona el tabulador (Tab) se pone el foco en el elemento siguiente, y con la combinación de teclas Shift+Tab se salta hacia el elemento anterior.
Con la pseudoclase :checked es posible aplicar estilos CSS a elementos <input> que sean del tipo checkbox y que estén marcados. Así es posible diferenciarlos visualmente de los que no estén marcados.
Mediante las pseudoclases :enabled y :disabled es posible aplicar estilos a los controles interactivos de los formularios que estén activados o desactivados, respectivamente. Por defecto, todos estos elementos están activados, y se desactivan introduciendo el atributo binario disabled.
En este sentido, las pseudoclases :read-only y :read-write permiten aplicar estilos a los elementos HTML que tengan el atributo binario readonly. Cuando un elemento tiene este atributo, su contenido no es editable pero se enviará a través del formulario. Por su parte, :read-write también aplica estilos a los elementos que tengan el atributo binario contenteditable.
Cuando un elemento de formulario tiene un estado indeterminado puede usarse la pseudoclase :indeterminate, gracias a la cual se puede aplicar estilos CSS a dicho estado. Este sería el caso de una barra de progreso cuya operación se está llevando a cabo pero le falta información para terminar.
Los elementos de formulario pueden tener valores por defecto asignados cuando se carga el documento HTML. Esto se consigue con el atributo selected, y se pueden estilizar mediante la pseudoclase :default.
Pseudoclases de validación
Las pseudoclases de validación son aquellas que están relacionadas con la validación de campos de un formulario HTML. Gracias a estas pseudoclases es posible decir al usuario, de una forma visual, que un campo tiene un valor válido y que, por lo tanto, será enviado correctamente.
| Pseudoclase | Descripción |
|---|---|
:valid | Aplica estilos al elemento con contenido válido. |
:invalid | Aplica estilos al elemento con contenido no válido. |
:in-range | Aplica estilos al elemento con contenido dentro de un rango. |
:out-of-range | Aplica estilos al elemento con contenido fuera de un rango. |
:required | Aplica estilos al elemento que tiene un campo obligatorio. |
:optional | Aplica estilos al elemento que tiene un campo opcional. |
Para aplicar estilos CSS a elementos de formulario cuyo contenido valida correctamente se usa la pseudoclase :valid. En cambio, si se quiere el efecto contrario, es decir, aplicar estilos a elementos cuyo contenido no ha sido validado, se usa la pseudoclase :invalid. Son de gran ayuda para el usuario.
También es posible aplicar estilos a un elemento cuyo valor se encuentre dentro del rango especificado por los atributos min y max. Para ello se usa la pseudoclase :in-range. Pero para aplicar estilos CSS a elementos con valores que están fuera de rango se usa la pseudoclase :out-of-range.
La pseudoclase :required sirve para aplicar estilos CSS a los elementos HTML que tengan el atributo required, mientras que la pseudoclase :optional permite aplicar estilos a la inversa, es decir, a aquellos elementos que son opcionales (sin el atributo required, opción por defecto).
Pseudoclase de idioma
La pseudoclase de idioma es :lang(), y permite aplicar estilos CSS a los elementos que tengan un atributo lang, e incluso a sus descendientes. Se utiliza mediante la sintaxis :lang() y debe introducirse, como único parámetro, el código de idioma deseado (ISO 639) entre los paréntesis.
Ejemplo de código CSS usando la pseudoclase :lang():
p:lang(es) {
color: orange;
}
Pseudoclases de posición
Las pseudoclases de posición están relacionadas con la posición en la que se encuentran los elementos HTML respecto al resto de elementos de su alrededor.
| Pseudoclase | Descripción |
|---|---|
:root | Aplica estilos al elemento raíz del documento. |
:first-child | Aplica estilos al primer elemento hijo. |
:last-child | Aplica estilos al último elemento hijo. |
:nth-child() | Aplica estilos a elementos hijos según su posición. |
:first-of-type | Aplica estilos al primer elemento hijo del mismo tipo. |
:last-of-type | Aplica estilos al último elemento hijo del mismo tipo. |
:nth-of-type() | Aplica estilos a elementos hijos del mismo tipo según su posición. |
:nth-last-of-type() | Aplica estilos a elementos hijos del mismo tipo según su posición contando desde el final. |
:only-child | Aplica estilos a elementos que sean el hijo único. |
:only-of-type | Aplica estilos a elementos que sean el hijo único sin hermanos del mismo tipo. |
:empty | Aplica estilos a elementos que estén vacíos de contenido. |
La pseudoclase :root es de gran utilidad cuando se quiere aplicar estilos CSS al elemento que se encuentra en la raíz del documento. En un documento HTML, :root representa al elemento <html>, por lo que se selecciona al mismo elemento; sin embargo, la pseudoclase tiene una especificidad mayor.
Mediante las pseudoclases :first-child y :last-child es posible hacer referencia a elementos que, dentro de un mismo nivel, sean el primer y el último, respectivamente. Si en vez del primero o el último queremos un número en concreto, se usa :nth-child(), poniendo el número entre paréntesis.
Con las pseudoclases :first-of-type y :last-of-type se selecciona elementos que, además de ser el primer y el último dentro de un mismo nivel, también son del mismo tipo. Para seleccionar una posición concreta, puede usarse la pseudoclase :nth-of-type(). Si además, se quiere empezar a contar desde el final, se usa la pseudoclase :nth-last-of-type().
Rizando el rizo, también es posible aplicar estilos CSS a aquellos elementos que sean el único hijo dentro de un elemento, en el mismo nivel; se usa la pseudoclase :only-child. Con la pseudoclase :only-of-type se aplica estilos al elemento que no tenga “hermanos” del mismo tipo.
Finalmente, la pseudoclase :empty representa a cualquier elemento que esté vacío. Por tanto, afectará tanto a los que no tengan elementos descendientes como a los que no tengan contenido de ningún tipo (incluido el espacio). Si tiene comentarios HTML (<!-- -->) se considerará igualmente vacío.
Numeración
Algunas pseudoclases de posición, como es el caso de :nth-child(), :nth-of-type() y :nth-last-of-type(), además de números pueden usarse otros parámetros como expresiones.
Mediante las palabras clave even y odd puede seleccionarse elementos HTML cuya posición numérica sea un valor par e impar, respectivamente. Así, por ejemplo, para seleccionar todos los elementos hijos dentro de otro que cuya posición sea par, se usará la pseudoclase :nth-child(even).
Además de eso, también puede usarse notación funcional para aplicar otro tipo de criterio en el momento de la selección. Se trata de An+B, es decir, «n» veces un valor + (-) otro valor. Tanto «A» como «B» deben ser un número entero, mientras que «n» es la letra que permite hacer uso de esa función.
Veamos algunos ejemplos:
:nth-child(2n): todos los números pares.:nth-child(2n+1): todos los números impares.:nth-child(8): el octavo elemento.:nth-child(4n): todos los múltiples de 4.:nth-child(n+8): todos los números a partir del 8.:nth-child(4n+8): todos los múltiples de 4 a partir del 8.
Pseudoclases de combinación
Las pseudoclases de combinación permiten agrupar o combinar selectores de una forma muy flexible. Se trata de una serie de selectores que utilizan la lógica, de tal manera que permiten seleccionar elementos utilizando ciertas restricciones lógicas. Estas pseudoclases requieren parámetros para funcionar.
| Pseudoclase | Descripción |
|---|---|
:not() | Aplica estilos a todos los elementos que no coinciden con el selector indicado. |
:is() | Aplica estilos a los elementos que coincidan con los selectores indicados, conservando la especificidad más alta. |
:where() | Aplica estilos a los elementos que coincidan con los selectores indicados , pero deja la especificidad en 0. |
:has() | Aplica estilos a los elementos contenedores (padre) que tengan los elementos hijos indicados. |
Vamos a verlos con más detalle.
Pseudoclase de negación
La pseudoclase de negación permite aplicar estilos CSS a todos los elementos que no coinciden con un selector determinado, lo que sería la operación inversa de un selector normal. Para usar esta pseudoclase se escribe :not(). Dentro del paréntesis, como parámetro, se indica un selector.
Veamos un ejemplo de código CSS:
p:not(.bar) {
margin: 0;
}
Este código es aplicar estilos CSS a todos los párrafos que no tengan la clase .bar, es decir, que no tengan el atributo class="bar".
Otro ejemplo de uso de pseudoclase de negación:
body :not(p) {
margin: 0;
}
Este último ejemplo es aplicar estilos CSS a todos los elementos del documento HTML, descendientes de <body>, que no sean párrafos.
Pseudoclase de combinación con especificidad
La pseudoclase de combinación :is() permite aplicar estilos CSS a todos los elementos que coinciden con los selectores indicados. Como parámetro acepta una lista de selectores. Es una pseudoclase de gran utilidad ya que permite sintetizar selectores grandes. Usa la especificidad del selector de mayor peso.
Cuando se combina varios selectores a la vez separándolos con una coma (,), los estilos se aplicarán solo cuando todos los selectores de la lista sean válidos. En cambio, con :is(), si un selector no es válido se ignorará, por lo que se aplicará los estilos CSS al resto de selectores que sean válidos.
Vamos a ver un ejemplo en el que combinamos tres selectores:
.main ol,
.main ul,
.main dl {
margin: 0;
}
El código anterior se puede simplificar con la pseudoclase :is():
.main :is(ol, ul, dl) {
margin-left: 0;
}
Pseudoclase de combinación sin especificidad
La pseudoclase de combinación :where funciona de una forma muy similar a :is(), ya que también permite aplicar estilos CSS a todos los elementos que coinciden con los selectores indicados como parámetro. La diferencia entre una y otra es que :where() siempre tiene 0 especificidad.
En esta pseudoclase ocurre lo mismo que con :is(): si uno de los selectores indicados como parámetro no es válido, se ignorará, aplicando igualmente los estilos CSS al resto de selectores indicados. Esto no sucede cuando se combina varios selectores separándolos con la coma (,).
Ejemplo de código CSS usando la pseudoclase :where():
.main :where(ol, ul, dl) {
margin: 0;
}
Pseudoclase de contenido
La pseudoclase de contenido :has() permite seleccionar elementos que contengan los elementos hijos indicados. Por tanto, permite seleccionar elementos contenedores. Como parámetro se indica los elementos hijos (descendientes) del elemento contenedor (padre) que se quiere seleccionar.
Imaginemos que queremos seleccionar todos los párrafos (elemento <p>) que tengan texto en negrita (elemento <strong>). Lo haremos así:
p:has(strong) {
color: blue;
}
Pseudoclases de impresión
Existen otras pseudoclases relacionadas con los medios paginados (media paged), como son el caso de :first, :left, :right y :blank, que se usan junto con la regla arroba @paged y permiten aplicar estilos CSS a ciertas páginas del documento generado, ya sea en papel o en formato PDF.
