:has é um seletor implacável

Uma pequena coisa aconteceu no caminho para publicar o APF :has() seletor ao velho Almanaque. eu tinha originalmente descrito :has() como um seletor “perdoador”, a ideia é que qualquer coisa em seu argumento seja avaliada, mesmo que um ou mais itens sejam inválidos.

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

See ::scoobydoo lá? Isso é totalmente inválido. Uma lista de seletores indulgente ignora esse seletor falso e avalia o restante dos itens como se fosse escrito assim:

article:has(h2, ul) { }

:has() era de fato um seletor indulgente em uma minuta anterior datada de 7 de maio de 2022. Mas isso mudou depois que um problema foi relatado que a natureza indulgente entra em conflito com jQuery quando :has() contém um seletor complexo (por exemplo header h2 + p). O W3C chegou a uma resolução para fazer :has() um seletor “implacável” apenas algumas semanas atrás.

Então, nosso exemplo anterior? A lista de seletores inteira é inválida porque o seletor falso é inválido. Mas os outros dois seletores indulgentes, :is() e :where(), permanecem inalterados.

Há um pouco de uma solução alternativa para isso. Lembrar, :is() e :where()estão perdoando, mesmo que :has() não é. Isso significa que podemos aninhar qualquer um desses seletores em :has() para obter um comportamento mais indulgente:

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

Qual deles você usa pode importar porque a especificidade de :is() é determinado pelo item mais específico em sua lista. Portanto, se você precisar de algo menos específico, é melhor procurar :where() uma vez que não aumenta a pontuação de especificidade.

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

Atualizamos algumas de nossas postagens para refletir as informações mais recentes. Estou vendo muitos outros na natureza que precisam ser atualizados, então apenas um pouco de PSA para quem precisa fazer o mesmo.

• Conteúdo com tecnologia de SEO e distribuição de relações públicas. Seja amplificado hoje.
• Platoblockchain. Inteligência Metaverso Web3. Conhecimento Ampliado. Acesse aqui.
• Fonte: https://css-tricks.com/has-is-an-unforgiving-selector/