Pseudo-clases

Concepto

Concepto:

Las pseudo-clases nos permiten seleccionar elementos basados en un estado específico.
Por ejemplo, las pseudo-clases nos permiten poner estilos que responden a:
- 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

Ventajas

Tienden a actuar como si hubieras aplicado una clase en una parte determinada del documento
Ayudan a reducir el exceso de clases y proporcionan un marcado más flexible y fácil de mantener.

Sintaxis

selector:pseudo-class {
     property: value;
}

Ejemplo:

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;
}

Combinando clases con pseudo-clases

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;
}

Tool Tip

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;
}

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 firma de seleccionar elementos HTML. Mira las siguientes categorías:

Pseudo-clases relacionadas a ENLACES
Pseudo-clases relacionadas a ENLACES e INPUT
Pseudo-clases relacionadas a Número/Posición
Pseudo-clases Relacionales
Pseudo-clases relacionadas al Texto

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	Click aquí
:visited	Seleccionar enlaces visitados	Click aquí
:hover	Seleccionar enlaces que tienen por encima el cursor	Click aquí
:active	Seleccionar los enlaces seleccionados (activos). Un enlace se convierte en activo cuando se lo clica.	Click aquí

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		Click aquí
:target		Click aquí
:enabled		Click aquí
:disabled		Click aquí
:checked		Click aquí
:required		Click aquí
:optional		Click aquí
:read-only		Click aquí
:read-write		Click aquí

Número/Posición

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

Relacionales

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

Texto

Pseudo-clase	Descripción	Ejemplo
:lang		Click aquí

Obra publicada con Licencia Creative Commons Reconocimiento Compartir igual 4.0