:has es un selector despiadado | trucos CSS

Ocurrió una pequeña cosa en el camino a la publicación de CSS :has() selector al antiguo almanaque. había descrito originalmente :has() Como selector "perdonador", la idea es que se evalúe todo 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) { }

ver ::scoobydoo ¿en el interior? Esto es completamente inválido. Una lista de selector indulgente ignora este selector falso y continúa evaluando los elementos restantes como si estuvieran escritos así:

article:has(h2, ul) { }

:has() él era de hecho un criador indulgente en un borrador anterior de fecha 7 de mayo de 2022pero eso ha cambiado después de informar un problema que la naturaleza indulgente entra en conflicto con jQuery cuando :has() contiene un selector complejo (p. ej. header h2 + p).W3C llegó a una resolución para hacer :has() selector "implacable" hace apenas unas semanas.

Entonces, ¿nuestro ejemplo anterior? La lista completa de selectores no es válida porque el selector falso no es válido. Pero los otros dos selectores indulgentes, :is() y :where()permanece inalterable.

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

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

El que use puede ser importante debido a las características específicas del :is() está determinada por el elemento más específico de su lista. Entonces, si necesita algo menos específico, es mejor buscar :where() Como 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)) { }

Hemos actualizado varias de nuestras publicaciones para reflejar la información más reciente. Veo 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.