Já faz um tempo desde o meu último artigo aqui (bem, um mês é um tempo para mim, de qualquer maneira 😅), pois estive ocupado com minha cabeça baixa preparando minha palestra sobre layout CSS moderno no Beyond Tellerand , que é ( verifica notas ) amanhã!
Embora eu não tenha tido muito tempo para blogs, isso me deu a chance de mergulhar mais uma vez nas mensagens sobre o layout CSS e a :has()pseudo-classe, ou “seletor pai”.
Mas o que estou percebendo enquanto continuo a brincar :has()é que, na prática, podemos selecionar qualquer elemento no DOM em relação a outro, desde que compartilhem um ancestral comum — o que deveriam, certo? Como qualquer elemento que queremos selecionar terá o <body>como seu ancestral. Isso o torna bastante poderoso.
Então, aqui estão algumas demos para esse efeito. (Você precisará visualizá-los em um navegador compatível :has(), por exemplo, Chrome ou Safari.) Neste, passar o mouse sobre um item da lista à esquerda anima nossas faixas de grade à direita. Eles compartilham um elemento wrapper comum como ancestral, mas não necessariamente.
Nesta segunda demonstração, estamos adicionando uma cor de fundo ao <section>elemento visado por um link em outro <section>ao passar o mouse ou clicar. Esta é talvez uma demonstração um tanto boba, mas posso ver alguns casos de uso em potencial, como fornecer uma pista visual para os usuários quanto à seção de destino de um documento.
Por fim, esta demonstração (melhor visualizada no desktop) abre um painel (usando faixas de grade animadas) quando o usuário clica no link à esquerda. O destino do link está oculto no painel recolhido. (Ele também combina consultas de contêiner para o conteúdo à direita.) Ocultar e revelar conteúdo geralmente é algo que deve ser feito com JS, e provavelmente há alguns problemas de acessibilidade aqui – não estou sugerindo que você deva fazer algo assim na produção . Mas é interessante ver o poder do CSS hoje!