:not(), :is() y :where(): selectores compuestos legibles

Tres funciones que hacen a los selectores expresivos: excluir con :not(), agrupar sin repetirte con :is(), y :where() — idéntico a :is() salvo por un detalle que lo convierte en la herramienta favorita de quienes diseñan sistemas CSS: su especificidad es SIEMPRE cero.

:not(): seleccionar por exclusión

/* margen entre secciones... excepto la primera */
section:not(:first-child) { margin-top: 4rem; }

/* estilos de botón para todo botón QUE NO sea el destacado */
.btn:not(.btn-primario) { background: transparent; border: 1px solid #6d28d9; }

/* el "lobotomized owl" moderno: espacio entre hermanos, sin tocar bordes */
.prosa > *:not(:first-child) { margin-top: 1em; }

:not() acepta listas (:not(.a, .b)) y evita el patrón viejo de "aplicar a todos y des-aplicar al último". Un matiz de la cascada: la especificidad de :not() es la de su ARGUMENTO — :not(.destacado) pesa como una clase.

:is(): agrupar sin repetirte

El dolor que resuelve, seguro ya lo escribiste:

/* ANTES: la letanía */
.prosa h1 a,
.prosa h2 a,
.prosa h3 a {
color: inherit;
}

/* DESPUÉS */
.prosa :is(h1, h2, h3) a { color: inherit; }

:is() distribuye la lista: se lee "cualquier h1, h2 o h3 dentro de .prosa". Su especificidad es la del argumento MÁS pesado de la lista (:is(h1, .titulo) pesa como clase, aunque matchee un h1) — predecible, pero pesa.

:where(): lo mismo, con especificidad CERO

/* estilos BASE de un sistema: fáciles de sobrescribir después */
:where(h1, h2, h3) {
line-height: 1.2;
font-family: var(--serif);
}

/* cualquier clase simple del usuario le gana sin pelear: */
.titulo-hero { line-height: 1.05; }  /* 0-1-0 vs 0-0-0: gana fácil */

Mini-reto

Refactoriza el CSS de tu periódico: busca selectores repetidos y compáctalos con :is(); mueve los estilos base (tipografía, line-height) a :where(); y reemplaza cualquier "regla + contra-regla del último" por :not(:last-child). El CSS debe quedar más corto Y más fácil de sobrescribir.

Qué sigue

Combinas selectores como un cirujano. La próxima lección es LA novedad más importante del CSS en una década: :has() — el selector de padre. Tarjetas que reaccionan a su contenido y formularios que se validan visualmente solos.