Saltar la navegación

Pseudo-clases

Concepto

Las pseudo-clases permiten seleccionar elementos basados en un estado específico, donde “estado” se refiere a uno de los modos del elemento HTML en el que se encuentra. Por ejemplo, un enlace (<a>) podría tener un estado “visitado” (cuando previamente ha sido clicado por el usuario), o “no visitado” (cuando ningún click ha sido recibido por el usuario). Usar pseudo-clases trae ventajas en el desarrollo como ayudar a reducir el exceso de clases y proporcionar un marcado más flexible y fácil de mantener, además, las pseudo-clases tienden a actuar como si hubieras aplicado una clase en una parte determinada del documento, 

Considerando que los elementos HTML tienen estados, es posible aplicar un estilo específico cuando el elementos cambia de estado. Ejemplos de estados a los cuales podemos responder con las pseudo-clases para poner estilos son:

  • al movimiento del ratón sobre un elemento
  • enlaces visitados y no visitados
  • elementos que obtienen el foco
  • los que son el primer elemento de su tipo
     

La sintaxis para definir una pseudo-clase se muestra a continuación:

selector:pseudo-class {
     property: value;
}

,donde pseudo-class puede ser reemplazada por una de las siguientes pseudo-clases que se muestran en la sección Categorías

Categorías

Se puede categorizar a las pseudo-clases según la relación con la que tienen con los elementos HTML o con la forma de seleccionar elementos HTML. El siguiente contenido presenta pestañas por cada una de las categorías de Pseudo-clases. No obstante, una lista completa de las pseudo-clases la puedes encontrar en W3c School.

ENLACES

Pseudo-clase
Descripción
Ejemplo
:link
Seleccionar enlaces no visitados
:visited
Seleccionar enlaces visitados
:hover
Seleccionar enlaces que tienen por encima el cursor
:active
Seleccionar los enlaces seleccionados (activos). Un enlace se convierte en activo cuando se lo clica.

NOTA: La documentación oficial indica que en el caso de los enlaces se debe seguir el siguiente orden de asignación de estilos para tener efectividad: link || visited --> hover --> active

ENLACES e INPUT

Pseudo-clase
Descripción
Ejemplo
:focus
:target
:enabled
:disabled
:checked
:required
:optional
:read-only
:read-write

Número/Posición

Pseudo-clase
Descripción
Ejemplo
:first-child
:last-child
:nth-child(n)
Selecciona cada elemento que es el -avo- hijo de su padre, sin considerar el tipo.
:nth-of-type()
:first-of-type
:last-of-type
:nth-last-child()
:only-of-type

Relacionales

Pseudo-clase
Descripción
Ejemplo
:not()
:empty

Texto

Pseudo-clase
Descripción
Ejemplo
:lang

Ejemplos

Ejemplo 1:  Si se tiene un párrafo cuya letra es de color azul y se quiere aplicar el color rojo cuando el mouse pasa por encima del párrafo (cambio de estado), el código sería así:
p{ color: blue; } /*El color del texto del párrafo es azul*/
p:hover{ color: red;} /*Al pasar el mouse, e color cambia a rojo*/
Ejemplo 2: Aplicar un determinado color a un enlace según el estado de este (no visitado, visitado, mouse sobre el enlace, enlaces seleccionados)
/* unvisited link */
a:link {
     color: #FF0000;
}
Ejemplo 3: Las Pseudo-clases pueden combinarse con las clases CSS. Ejemplo: Cambiar de color del enlace cuando el mouse pasa sobre este:
a.highlight:hover {
     color: #ff0000;
}
Ejemplo 4: Un ejemplo clásico de la combinación de pseudo-clases y clases CSS es el ToolTip para brindar retroalimentación al usuario.

index.html

<!DOCTYPE html>
<html>
   <head></head>
<body>
   <div>Hover over me to show the p element
      <p>Tada! Here I am!</p>
   </div>
</body>
</html>



style.css

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}