James Moro
Iniciei minha vida profissional como desenvolvedor web em 2008. Tenho um canal no Youtube onde publico vídeos sobre tecnologia.
O Poder do Seletor CSS :has
- Publicado em: Css / Sass, SEO, Tutoriais que resolvem, Vídeos
- 733 visualizações
O melhor da tecnologia está no nosso canal no WhatsApp
O seletor :has é um pseudo-seletor CSS que permite selecionar elementos com base em seus descendentes diretos que correspondem a um determinado seletor. Ele foi proposto como parte do Nível 4 do CSS Selectors, mas ainda não é amplamente suportado por todos os navegadores.
O seletor :has é útil quando você deseja selecionar um elemento pai que contém um elemento filho específico. Ele permite que você selecione elementos com base em sua estrutura hierárquica, em vez de depender apenas de suas classes, IDs ou outros atributos.
A sintaxe básica do seletor :has é a seguinte:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| elemento-pai:has(seletor-filho) { | |
| /* estilos aplicados ao elemento-pai */ | |
| } |
Por exemplo, se você tiver a seguinte estrutura HTML:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="pai"> | |
| <span>Texto 1</span> | |
| <span>Texto 2</span> | |
| </div> | |
| <div class="pai"> | |
| <span>Texto 3</span> | |
| <span>Texto 4</span> | |
| </div> |
Você pode usar o seletor :has para selecionar apenas os elementos <div> que contêm um <span> com o texto “Texto 2”:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| div:has(span:contains("Texto 2")) { | |
| /* estilos aplicados aos divs que contêm o span com "Texto 2" */ | |
| } |
No exemplo acima, somente o primeiro <div class="pai"> será selecionado, pois é o único que contém o <span> com o texto “Texto 2”.
É importante observar que o suporte ao seletor :has varia entre os navegadores e pode não funcionar em todos eles. Portanto, é recomendável verificar a compatibilidade antes de usá-lo em um projeto.
Assista ao vídeo Aproveite o potencial do incrível pseudo-seletor CSS :has()
Código disponível
Embora o seletor :has seja uma adição útil ao conjunto de recursos do CSS, é importante observar que seu suporte ainda é limitado em alguns navegadores. No momento, apenas alguns navegadores modernos, como Firefox e jQuery, oferecem suporte ao seletor :has. Portanto, ao usá-lo, é necessário considerar a compatibilidade dos navegadores e fornecer soluções alternativas ou degradação graciosa, se necessário, para garantir a funcionalidade adequada em diferentes ambientes.
Conclusão
O seletor CSS :has é um recurso poderoso que permite selecionar elementos pai com base em seus descendentes diretos correspondentes. Com sua sintaxe simples e flexível, é possível aplicar estilos específicos apenas aos elementos desejados, com base em sua estrutura hierárquica. Embora o suporte ao seletor :has possa ser limitado em alguns navegadores, ele ainda oferece um grande potencial para aprimorar a estilização e manipulação de elementos em páginas da web.
Ao utilizar o seletor :has com sabedoria e considerando a compatibilidade dos navegadores, os desenvolvedores podem explorar todo o poder do CSS e alcançar resultados surpreendentes em seus projetos.
Compartilhe
Artigos Relacionados
Sobre o autor
