:has es un selector implacable

Una pequeña cosa sucedió en el camino a la publicación de la CO :has() selector al viejo Almanaque. había descrito originalmente :has() como un selector "perdonador", la idea es que se evalúe cualquier cosa en su argumento, incluso si uno o más de los elementos no son válidos.

/* Example: Do not use! */
article:has(h2, ul, ::-scoobydoo) { }

See ::scoobydoo ¿ahí? Eso es totalmente inválido. Una lista de selectores indulgentes ignora ese selector falso y procede a evaluar el resto de los elementos como si estuvieran escritos así:

article:has(h2, ul) { }

:has() fue de hecho un selector indulgente en un borrador anterior de fecha 7 de mayo de 2022. Pero eso cambió después de que se informó un problema que la naturaleza indulgente entra en conflicto con jQuery cuando :has() contiene un selector complejo (p. ej. header h2 + p). El W3C llegó a una resolución para para lograr :has() un selector "implacable" hace solo unas semanas

Entonces, ¿nuestro ejemplo anterior? Toda la lista de selectores no es válida porque el selector falso no es válido. Pero los otros dos selectores indulgentes, :is() y :where(), se dejan sin cambios.

Hay una pequeña solución para esto. Recordar, :is() y :where()son indulgentes, incluso si :has() no es. Eso significa que podemos anidar cualquiera de esos selectores en :has() para obtener un comportamiento más indulgente:

article:has(:where(h2, ul, ::-scoobydoo)) { }

Cuál usar puede ser importante porque la especificidad de :is() está determinada por el elemento más específico de su lista. Entonces, si necesita algo menos específico, será mejor que busque :where() ya que no se suma a la puntuación de especificidad.

/* Specificity: (0,0,1) */
article:has(:where(h2, ul, ::-scoobydoo)) { } /* Specificity: (0,0,2) */
article:has(:is(h2, ul, ::-scoobydoo)) { }

Actualizamos algunas de nuestras publicaciones para reflejar la información más reciente. Estoy viendo muchos otros en la naturaleza que necesitan ser actualizados, así que solo un pequeño anuncio de servicio público para cualquiera que necesite hacer lo mismo.

• Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
• Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. Accede Aquí.
• Fuente: https://css-tricks.com/has-is-an-unforgiving-selector/