¿Para qué sirven los selectores de pseudo-clase en CSS?

Los selectores de pseudo-clase en CSS son palabras clave que se añaden a los selectores para permitirte aplicar estilos a elementos basándote en información que no está directamente presente en el árbol del documento HTML. Esta información suele estar relacionada con el estado del elemento (por ejemplo, si el cursor está encima, si ha sido visitado, si está enfocado) o con su posición o relación con otros elementos (por ejemplo, si es el primer hijo, el último, o un hijo n-ésimo).

Las pseudo-clases comienzan con dos puntos (:), seguido del nombre de la pseudo-clase.

Sirven para una gran variedad de propósitos, entre los más comunes:

1. Estilizar diferentes estados de interacción del usuario:
   • :link: Aplica estilos a enlaces que aún no han sido visitados.
   • :visited: Aplica estilos a enlaces que el usuario ya ha visitado.
   • :hover: Aplica estilos cuando el puntero del ratón se encuentra sobre un elemento.
   • :active: Aplica estilos cuando un elemento está siendo activado por el usuario (por ejemplo, mientras se hace clic en un enlace o botón).
   • :focus: Aplica estilos cuando un elemento ha recibido el foco (por ejemplo, un campo de formulario <input> al hacer clic en él o al navegar con el tabulador, o un enlace).
   • :focus-visible: Similar a :focus, pero el navegador intenta mostrar el indicador de foco solo cuando es útil para la accesibilidad (ej. navegación por teclado, no necesariamente en clics de ratón).
2. Seleccionar elementos basados en su posición o estructura en el DOM:
   • :first-child: Selecciona un elemento que es el primer hijo de su elemento padre.
   • :last-child: Selecciona un elemento que es el último hijo de su padre.
   • :nth-child(n): Selecciona elementos hijos basados en su posición mediante una fórmula (donde n puede ser un número, odd para impares, even para pares, o una expresión como 2n+1). Muy útil para alternar estilos en listas o filas de tablas.
   • :nth-of-type(n): Similar a nth-child, pero selecciona basándose en el tipo de elemento.
   • :only-child: Selecciona un elemento si es el único hijo de su padre.
   • :empty: Selecciona elementos que no tienen ningún hijo (incluyendo nodos de texto).
3. Estilizar elementos de formulario según su estado:
   • :checked: Aplica estilos a elementos de interfaz de usuario como checkboxes o botones de radio cuando están seleccionados.
   • :disabled: Aplica estilos a elementos de formulario que están deshabilitados.
   • :enabled: Aplica estilos a elementos de formulario que están habilitados.
   • :required: Aplica estilos a campos de formulario que tienen el atributo required.
   • :optional: Aplica estilos a campos de formulario que no son obligatorios.
   • :valid / :invalid: Aplica estilos a campos de formulario según si su contenido es válido o inválido de acuerdo con las reglas de validación HTML5.

Ejemplo:

/* Estilo para enlaces */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { text-decoration: underline; color: red; }
a:active { color: orange; }

/* Estilo para campos de texto con foco */
input[type="text"]:focus {
  border-color: dodgerblue;
  box-shadow: 0 0 5px rgba(30,144,255,0.5);
}

/* Estilo para filas impares de una lista */
ul li:nth-child(odd) {
  background-color: #f2f2f2;
}Lenguaje del código: PHP (php)