Maquetación Web Dinámica / Pseudo-clases y pseudo-elementos: el arsenal secreto
: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
: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:
: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
Escribes los estilos base de tipografía de tu sistema y quieres que CUALQUIER clase pueda sobrescribirlos sin esfuerzo. ¿Cómo los envuelves?
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.