CSS
Revisa pseudo-clases de estado, estructura, formularios, enlaces e interacción para aplicar estilos según condiciones del documento y del usuario.
Una pseudo-clase selecciona un elemento según estado, posición o relación.
.button:hover { ... }.button:hover { }
.button:active { }
.button:focus { }
.button:focus-visible { }:hover: un pointing device señala el elemento.:active: está siendo activado.:focus: tiene foco.:focus-visible: el navegador considera que debe mostrar indicador visible.No ocultes outline sin reemplazo equivalente.
.field:focus-within {
border-color: var(--focus-color);
}Coincide cuando el elemento o un descendiente tiene foco.
:any-link { }
:link { }
:visited { }:visited tiene restricciones de privacidad: varias propiedades no pueden revelar historial mediante scripts o diferencias medibles.
input:disabled { }
input:enabled { }
input:checked { }
input:required { }
input:optional { }
input:valid { }
input:invalid { }
input:user-invalid { }:invalid puede activarse antes de que el usuario interactúe. :user-invalid representa mejor feedback posterior a interacción cuando existe soporte objetivo.
li:first-child { }
li:last-child { }
li:only-child { }
li:nth-child(2n) { }
li:nth-of-type(3) { }:nth-child() cuenta todos los hermanos. :nth-of-type() cuenta hermanos del mismo tipo.
Sintaxis moderna permite filtrar:
.card:nth-child(2n of .featured) { }.message:empty { display: none; }Solo coincide sin nodos hijos. Un espacio o texto invisible puede impedirlo.
:target { scroll-margin-block: 6rem; }
[aria-current="page"] { font-weight: 700; }:target responde al fragmento URL. aria-current no es pseudo-clase, pero suele representar mejor navegación actual.
:root { }
:fullscreen { }
:modal { }
:popover-open { }Representan contextos del documento o primitivas nativas.
.button.is-loading { }Una clase sigue siendo apropiada para estado de aplicación. No fuerces una pseudo-clase que no representa ese estado.
¿Por qué li:nth-child(2) puede no seleccionar el segundo li?
Porque cuenta todos los hijos del padre; si otro tipo de elemento ocupa la segunda posición, ese li no coincide.
:is(), :where(), :not() y :has() reúne selectores funcionales modernos.