Pseudoclases

Las pseudoclases sirven para establecer estilos para determinados estados especiales de los elementos seleccionados, como por ejemplo dar un estilo específico al pasar el ratón por encima de un determinado elemento, modificar el color de la fuente tras visitar un enlace o modificar las propiedades de un control cuando éste recibe el foco.

La sintaxi de una pseudoclase es:

selector:pseudoclase {
  propiedad:valor;
}

A continuación repasaremos algunas de las pseudoclases más utilizadas.

La lista completa de pseudoclases se puede consultar en la: lista completa de pseudoclases del W3Schools

Pseudoclases para Enlaces

:visited

La pseudoclase :visitedpermite aplicar estilo a los enlaces que se hayan visitado.

Veamos un ejemplo de aplicación:

/* Cambia el color de fondo a rojo de los enlaces visitados */
a:visited {
  background-color:red;
}

Los navegadores limitan los estilos que se pueden aplicar mediante este selector por razones de seguridad

:link

La pseudoclase :linkpermite aplicar estilo a los enlaces que no se hayan visitado.

Veamos un ejemplo de aplicación:

/* Cambia el color de fondo a rojo de los enlaces no visitados */
a:link {
  background-color:red;
}

Pseudoclases para Eventos

:hover

La pseudoclase :hover permite aplicar estilo al elemento seleccionado cuando se pasa el ratón por encima del mismo.

Veamos un ejemplo de aplicación:

/* Cambia el color de fondo a amarillo de los enlaces cuando el ratón se desliza por encima de los mismos */
a:hover {
  background-color: yellow;
}

:hover debe ir siempre tras :link y :visited (si aparecen) para que sea efectivo.

:active

La pseudoclase :active permite aplicar estilo al elemento seleccionado cuando éste se vuelve activo (se le hace click).

Veamos un ejemplo de aplicación:

/* Cambia el color de fondo a rojo del texto dentro de la etiqueta span cuando se hace click sobre el mismo */
span:active {
  background-color:red;
}

:active debe ir siempre tras :hover (si aparece) para que sea efectivo.

:focus

La pseudoclase :focus permite aplicar estilo al elemento seleccionado cuando éste recibe el foco. Solo funciona sobre los elementos que pueden recibir el foco tales como controles, botones, etc.

Veamos un ejemplo de aplicación:

/* Cambia el color de fondo a amarillo cuando el control (input) recibe el foco */
input:focus {
  background-color: yellow;
}

Pseudoclases para Controles

:checked

La pseudoclase :checkedpermite aplicar estilo al <input> seleccionado cuando el estado del mismo pasa a tener el valor checked.

Veamos un ejemplo de aplicación:

/* Modifica el tamaño de los inputs (radio o checkbox) cuando se encuentran en estado checked */
input:checked {
  height: 50px;
  width: 50px;
}

:required

La pseudoclase :requiredpermite aplicar estilo al <input>seleccionado cuando este sea de tipo obligatorio y por tanto tenga el atributo required.

Veamos un ejemplo de aplicación:

/* Modifica el color del texto a rojo para los inputs obligatorios */
input:required {
  color: red;
}

:optional

La pseudoclase :optionalpermite aplicar estilo al <input>seleccionado cuando este sea de tipo opcional y no tenga por tanto el atributo required.

Veamos un ejemplo de aplicación:

/* Modifica el color del texto a azul para los inputs opcionales */
input:optional {
  color: blue;
}

Pseudoclases de Posición

:first-child

La pseudoclase :first-child permite aplicar estilo al elemento seleccionado que sea el primer hijo para su padre.

Veamos un ejemplo de aplicación:

/* Cambia el color de fondo a amarillo para los párrafos que sean el primer hijo de su padre */
p:first-child {
  background-color: yellow;
}

:first-of-type

La pseudoclase :first-of-type permite aplicar estilo al elemento seleccionado que sea el primero hijo de su tipo para su padre.

Veamos un ejemplo de aplicación:

/* Cambia el color de fondo a amarillo para los párrafos que sean el primer hijo de tipo para su padre */
p:first-of-type {
  background-color: yellow;
}

:last-child

La pseudoclase :last-child permite aplicar estilo al elemento seleccionado que sea el último hijo para su padre.

Veamos un ejemplo de aplicación:

/* Cambia el color de fondo a amarillo para los párrafos que sean el último hijo de su padre */
p:last-child {
  background-color: yellow;
}

:last-of-type

La pseudoclase :last-of-type permite aplicar estilo al elemento seleccionado que sea el último hijo de su tipo para su padre.

Veamos un ejemplo de aplicación:

/* Cambia el color de fondo a amarillo para los párrafos que sean el último hijo de tipo para su padre */
p:last-of-type {
  background-color: yellow;
}

:nth-child(n)

La pseudoclase :nth-child(n) permite aplicar estilo al elemento seleccionado que sea el n hijo para su padre.

Veamos un ejemplo de aplicación:

/* Cambia el color de fondo a amarillo para los párrafos que sean el tercer hijo de su padre */
p:nth-child(3) {
  background-color: yellow;
}

:nth-of-type(n)

La pseudoclase :nth-of-type(n) permite aplicar estilo al elemento seleccionado que sea el n hijo de su tipo para su padre.

Veamos un ejemplo de aplicación:

/* Cambia el color de fondo a amarillo para los párrafos que sean el segundo hijo de tipo para su padre */
p:nth-of-type(2) {
  background-color: yellow;
}

Pseudoclase Inversa

:not(selector)

La pseudoclase :not(selector) permite aplicar estilo a los elementos que no sean seleccionados por el selector indicado en la pseudoclase.

Veamos un ejemplo de aplicación:

/* Cambia el color del texto a rojo para todos los elementos que no sean anchors */
:not(a) {
  color:red;
}