:has() - Como utilizar este novo e poderoso pseudo-seletor CSS
:has() é um dos pseudo-seletores mais poderosos incluídos na última versão do CSS e finalmente você pode, por exemplo, alterar um elemento pai ou classe pai dependendo do que tiver no elemento filho ou na classe filho.
Isto se estende ao ponto de conseguir alterar o layout geral de um formulário (ou até da página inteira) conforme o estado e a validação dos inputs, ou alterar a classe pai caso não exista um elemento filho, alterar o layout de uma grid caso uma das células possua uma imagem ou não (vamos ver esse exemplo logo abaixo), alterar completamente o layout de um post conforme os elementos que foram incluídos dentro dele... as possibilidades são infinitas e tudo sem utilizar JavaScript e somente utilizando CSS.
Então após aproximadamente 20 anos de discussões sobre como implementar este recurso com performance e flexibilidade, ele foi oficialmente definido como o pseudo-seletor :has() no Selectors Level 4.
Compatibilidade dos navegadores com o :has
Antes de entrarmos nos exemplos de como utilizar o :has e até antes de você utilizar esse recurso CSS em Produção, sugiro conferir a compatibilidade entre os navegadores que felizmente agora está uma corrida muito legal por todas as engines implementarem e, por mais imporessionante que seja, o Safari com o WebKit saiu na frente de todo mundo:
Exemplo de como utilizar o :has
É extremamente simples de se estilizar classes e elementos com o :has e eu irei utilizar um exemplo encontrado no anúncio oficial do WebKit comemorando a disponibilidade já hoje desse novo recurso.
Imagine um HTML com a seguinte estrutura abaixo onde uma tag figure abraça uma tag img que mostra uma flor:
<figure>
<img src="flores.jpg" alt="flores da primavera">
</figure>
Na mesma página, temos mais uma seção também com uma imagem, porém neste caso ela possui uma legenda que é adicionada pela tag figcaption (Legenda da Figura):
<figure>
<img src="cachorro.jpg" alt="rapaz suspeito com seu workshire na grama ao sol">
<figcaption>Miki adora estar ao ar livre sem coleira.</figcaption>
</figure>
E é agora que o negócio fica interessante, pois podemos alterar a estilização da tag raiz figure conforme o que aparecer como filho, por exemplo, se existir um filho figcaption, vamos alterar a estilização da classe pai para ter um fundo branco e um espaçamento adicional:
figure:has(figcaption) {
background: white;
padding: 0.6rem;
}
Então sem injetar classes adicionais no HTML e implementar isso usando somente CSS, o resultado é o seguinte:
Outro exemplo utilizando :has e Display Grid CSS
Extraindo outro exemplo do artigo mencionado acima, é possível utilizar o :has() para configurar as células de uma grade que foi estilizada utilizando CSS Grid conforme o que existir dentro de cada célula, onde novamente, sem precisar que o backend ou frontend adicionem classes específicas para controlar a estilização.
Então neste exemplo, se uma célula representada pela tag article possui uma imagem dentro dela, podemos estilizar a célula para que ela consuma linhas ou colunas adicionais para ter mais espaço disponível:
article:has(img) {
grid-column: span 2;
grid-row: span 2;
}
Resultado utilizando o :has():
Resultado sem utilizar o :has():
Conclusão
Este pseudo-seletor é extremamente bem vindo para conseguir extrair ainda mais do código backend ou frontend que inseriam classes adicionais para atingir certas estilizações mais avançadas e agora utilizar somente CSS para controlar estes aspectos visuais e fazer isso com altíssima performance.
🛑 Um pedido sincero
Estamos realmente tentando construir um pedaço de internet mais massa aqui no TabNews, então você poderá nos ajudar DE VERDADE se compartilhar o link dessa publicação em outros lugares, pode ser 1 grupo de Facebook, ou grupo de Discord, Whatsapp, onde for que você acredite que faça sentido e as pessoas de lá vão gostar de aprender sobre essa novidade, combinado? Valeu demais 🤝