CSS: Pseudoclases

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, por tanto, a su derecha se añade la palabra clave 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;
}

Pseudoclases de enlaces

Las pseudoclases de enlaces están relacionadas con los enlaces, por lo que ayudan a cambiar el estilo de los enlaces dependiendo de su comportamiento. Por ejemplo, un enlace visitado se puede ver diferente de un enlace normal.

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 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. Esto puede lograrse gracias a la pseudoclase :not(). El selector se indicará dentro de los paréntesis.

Veamos un ejemplo de código CSS:

p:not(.bar) {
  propiedad: valor;
}

Lo que hace 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) {
  propiedad: valor;
}

Lo que hace este último ejemplo es aplicar estilos CSS a todos los elementos del documento HTML, descendientes de <body>, que no sean párrafos.

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. Para usarlo, se usa la sintaxis :lang() y debe introducirse el código de idioma (ISO 639) entre los paréntesis, ya que es su parámetro.

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.

Otras pseudoclases

Existen otras pseudoclases relacionadas con las media queries (consultas de medios), como son el caso de :first, :left, :right y :blank, que se tratan en el artículo correspondiente a la adaptabilidad.

← Artículo anterior
CSS: Selectores
Artículo siguiente →
CSS: Pseudoelementos