Resumen

  • El borrador Selectors Level 4 del W3C de noviembre de 2018 definía :has() para elegir un elemento según un hijo o un hermano posterior, pero lo dejaba fuera del perfil activo usado por CSS.
  • El texto de mayo de 2022 eliminó los perfiles y mantuvo :has() como función opcional y en riesgo; en noviembre se prohibió anidar :has() y se limitaron los pseudoelementos en su argumento.

Una redacción prepara tarjetas para su portada. Una noticia trae una fotografía; otra vive de un titular y una frase. El marco de la primera necesita más espacio, quizá un fondo distinto. Seleccionar la foto dentro de la tarjeta siempre fue fácil. Elegir la tarjeta porque contiene una foto convirtió una decisión visual sencilla en un recado: alguien debía añadir una clase, cambiar el marcado o pedir a un script que delatara al hijo. La casa necesitaba decoración, pero el padre no recibía correo de quienes vivían dentro.

El borrador del W3C del 21 de noviembre de 2018 ya describía la respuesta. Su ejemplo a:has(> img) elige un enlace con una imagen como hijo directo. El enlace es el elemento seleccionado; la imagen sirve de prueba. Otro ejemplo, dt:has(+ dt), elige un término de definición seguido inmediatamente por otro. Este segundo caso le arruina la exclusividad al apodo «selector de padres». También sabe mirar la puerta de al lado. :has() pregunta por una relación anclada en el elemento que se quiere seleccionar.

La propuesta de 2018, sin embargo, tenía una lista de invitados peculiar. Separaba los selectores en un perfil activo para la coincidencia CSS del navegador y otro de instantánea para consultas menos sensibles al tiempo sobre un árbol estático. querySelector() servía como ejemplo del segundo. :has() figuraba en ese perfil de instantánea y quedaba excluido del activo. Un inspector podía preguntar si el enlace alojaba una imagen; la hoja de estilo que seguía cambiando con la página tenía que quedarse callada según aquel borrador. El documento pedía a los implementadores revisar la división.

El texto del 7 de mayo de 2022 cambió la portería. Su registro de cambios eliminó los perfiles y marcó :has() como opcional y «at-risk». Ya no había una prohibición por pertenecer al supuesto equipo de las consultas estáticas. Cada implementación conservaba la decisión de admitir esa función bajo el borrador. El reglamento abrió la puerta del salón; a los navegadores les tocaba decidir si iban a entrar.

La mecánica conserva una sencillez traviesa. En a:has(> img), el signo > exige que la imagen sea hija directa. En dt:has(+ dt), el signo + exige un hermano inmediatamente posterior. Cambiar esos signos cambia la pregunta que hará CSS. Una tarjeta puede preguntar por una imagen concreta, una sección por cualquiera de sus encabezados, un término por el siguiente término. El árbol del documento sigue en su sitio. Es el elemento seleccionado el que obtiene un traje nuevo después de mirar quién está dentro o al lado.

El borrador de mayo de 2022 deja una trampa para quien lea las fórmulas con prisa. section:not(:has(h1, h2, h3, h4, h5, h6)) selecciona una sección que carece de encabezados descendientes. En section:has(:not(h1, h2, h3, h4, h5, h6)), la negación cambia de asiento: ahora basta con encontrar algo que no sea un encabezado. Una sección con un título magnífico y un párrafo corriente puede cumplir la segunda condición. La diferencia cabe en un paréntesis. El resultado puede ocupar toda la portada.

La revisión del 11 de noviembre de 2022 puso límites a la curiosidad. Prohibió poner un :has() dentro de otro y, por regla general, excluyó los pseudoelementos de su argumento. Algunos pseudoelementos existen según cómo se estilicen sus antepasados; permitir que el antepasado dependiera de ellos podía formar un círculo. La reunión familiar necesita terminar alguna vez. Una pregunta sobre los hijos no puede generar nuevos hijos para justificar su propia respuesta.

La historia de publicaciones del W3C fija la secuencia de 2018 y 2022. Ahí está el cambio interesante: una relación que el lenguaje describía pero que el CSS activo no podía emplear en el borrador antiguo pasó a una opción planteada para hojas de estilo en el nuevo. El navegador evalúa la relación; la redacción decide si la foto merece otro diseño. El marco puede atender a la casa real, con sus habitantes reales, sin pegarle una nota artificial en la puerta cada vez que llega una imagen.

El padre por fin lee el correo. Lo divertido es que también llegó una carta del vecino.