tag vazia de código html num fundo claro
Unsplash/jacksonsophat

Atualizado em

A pseudo-classe CSS :has() é um seletor poderoso que permite direcionar um elemento com base na existência de certos elementos dentro dele. É especialmente útil para selecionar um elemento pai ou um elemento irmão anterior em relação a um elemento de referência. Conheça as suas principais características:

  • Pseudo-classe funcional: :has() é uma pseudo-classe funcional, indicando que ela realiza uma função específica em vez de representar um estado simples.
  • Correspondência de seletores relativos: Ela seleciona um elemento se algum dos seletores relativos fornecidos como argumento corresponder a pelo menos um elemento quando ancorado contra o elemento atual.
  • Seleção de elementos pai ou irmãos: Essa pseudo-classe fornece uma maneira de selecionar um elemento pai ou um elemento irmão anterior em relação a um elemento de referência.
  • Usando lista de seletores relativos: A lista de seletores relativos é passada como argumento para :has(), e ela define as condições que os elementos descendentes devem atender para que o pai ou irmão anterior seja selecionado.

O conceito por trás da pseudo-classe :has()

A pseudo-classe :has() tem origem no Selectors Level 4, uma especificação em desenvolvimento pelo World Wide Web Consortium (W3C) para aprimorar as capacidades de seletores CSS. Ela introduz uma funcionalidade aguardada por muitos desenvolvedores: a capacidade de selecionar elementos com base no conteúdo que eles contêm.

Antes do :has(), os desenvolvedores muitas vezes recorriam a soluções complexas de JavaScript para estilizar elementos com base em seu conteúdo interno. A pseudo-classe :has() oferece uma abordagem mais direta e declarativa para esse problema.

Sintaxe básica

A sintaxe básica da pseudo-classe :has() é relativamente simples. Ela aceita um seletor como argumento e seleciona os elementos que contêm pelo menos um elemento que corresponda ao seletor fornecido. Aqui está um exemplo básico:

p:has(a) {
  background-color: #f0f0f0;
}

Neste exemplo, todos os parágrafos (<p>) que contêm pelo menos um link (<a>) terão um fundo cinza claro.

Suporte atual nos navegadores

Como qualquer recurso emergente, o suporte nos navegadores é um ponto crítico a ser considerado ao implementar a pseudo-classe :has(). Até a produção deste artigo, o suporte ainda está em estágios iniciais.

Navegadores como Google Chrome, Mozilla Firefox e Microsoft Edge começaram a implementar o suporte experimental. No entanto, a compatibilidade pode variar e é aconselhável verificar as últimas atualizações antes de adotar amplamente o uso dessa pseudo-classe em projetos de produção.

Exemplos práticos de utilização

1. Estilizando elementos com base em conteúdo aninhado

Vamos considerar um cenário comum: uma lista de artigos onde cada item de lista contém um título (<h2>) e uma breve descrição (<p>). Usando a pseudo-classe :has(), podemos estilizar os itens da lista que contêm títulos com base no seu conteúdo. Veja o exemplo:

li:has(h2) {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}

Neste exemplo, todos os itens de lista que contêm um título (<h2>) terão uma borda inferior e um espaço adicional abaixo, criando uma separação visual.

2. Realçando elementos com determinadas características

Imagine uma tabela de dados onde algumas células contêm valores críticos. Com a pseudo-classe :has(), podemos destacar essas células de maneira simples e eficaz:

td:has(.critical-value) {
  color: red;
  font-weight: bold;
}

Neste caso, as células da tabela que contêm a classe critical-value terão uma aparência visualmente distinta, facilitando a identificação de informações cruciais.

Considerações importantes

Embora a pseudo-classe :has() ofereça uma funcionalidade valiosa, é crucial usá-la com moderação e compreender suas limitações. Algumas considerações importantes incluem:

  • Desempenho: Seletores complexos podem impactar o desempenho da página. É aconselhável testar o desempenho em diferentes cenários antes de adotar amplamente a pseudo-classe :has().
  • Compatibilidade: Como mencionado anteriormente, o suporte nos navegadores ainda está em desenvolvimento. Verifique regularmente as atualizações e esteja ciente das possíveis limitações em determinados ambientes.
  • Legibilidade do Código: Ao usar a pseudo-classe :has(), é essencial manter o código claro e compreensível. Evite seletores excessivamente complexos que possam dificultar a manutenção.

Para obter informações mais detalhadas e atualizadas sobre a pseudo-classe :has(), consulte a documentação oficial do W3C.