Los Pseudo-selectores son el motor de interactividad nativa de CSS. Permiten definir cómo se comportan visualmente los elementos basándose en la interacción del usuario (estado) o inyectar fragmentos virtuales en el árbol DOM (Document Object Model) sin tocar el HTML subyacente.
1Pseudo-Classes vs Pseudo-Elements
Es vital arquitectónicamente distinguir entre ambos conceptos:
| Tipo | Sintaxis | Función Principal | Ejemplos Comunes |
| :--- | :--- | :--- | :--- |
| Pseudo-Clase | : (Un dos puntos) | Detecta Estados del usuario o posiciones relativas. | :hover, :focus, :nth-child |
| Pseudo-Elemento | :: (Dos colones) | Crea Fragmentos virtuales en el DOM. | ::before, ::after, ::first-line |
El ::before es un pseudo-elemento que inserta contenido virtual; es un requisito arquitectónico incluir la propiedad content (ej. content: '';) para que el navegador lo renderice.
2State Management with Pseudo-Classes
Las Pseudo-clases (:) reaccionan al hardware del usuario. Las 'Cuatro Grandes' para enlaces se deben escribir estrictamente en este orden (LVHA) o la Cascada se romperá:
1. :link (Sin visitar)
2. :visited (Ya en el historial)
3. :hover (Cursor del mouse encima)
4. :active (Botón del mouse presionado)
El estado :focus es el más crítico para Accesibilidad Web (WCAG), ya que determina la visualización para los usuarios que navegan con el teclado.
