T
css selectors has-selector is-selector web-development

O Poder dos Seletores CSS Modernos: :has, :is e :where

Domine a nova geração de seletores CSS. Saiba como o :has() funciona como um seletor de pai, e como o :is() e o :where() simplificam as suas folhas de estilo.

2026-04-18

O Poder dos Seletores CSS Modernos: :has, :is e :where

Durante anos, os programadores CSS sonharam com um "seletor de pai" — uma forma de estilizar um elemento com base nos seus filhos. Também lutámos com listas de seletores longas e repetitivas que inchavam os nossos ficheiros CSS.

O CSS moderno finalmente cumpriu. Com a chegada do :has(), :is() e :where(), a forma como escrevemos os seletores mudou fundamentalmente.

1. :has(): O "Seletor de Pai" que muda o jogo

A pseudo-classe :has() é indiscutivelmente a adição mais poderosa ao CSS numa década. Ela permite selecionar um elemento se este contiver um filho específico ou se for seguido por um irmão específico.

O caso de uso de "Pai"

/* Estiliza o card APENAS se este contiver uma imagem */
.card:has(img) {
  display: flex;
  flex-direction: column;
}

/* Estiliza o card APENAS se este tiver uma etiqueta de destaque */
.card:has(.featured-badge) {
  border: 2px solid gold;
}

O caso de uso "Condicional"

Pode até usá-lo para estilizar labels com base no estado dos seus inputs:

/* Estiliza a label se a checkbox lá dentro estiver marcada */
.form-group:has(input:checked) label {
  color: green;
  font-weight: bold;
}

2. :is(): Simplificando seletores complexos

Já alguma vez escreveu código como este?

header h1, header h2, header h3, footer h1, footer h2, footer h3 {
  color: blue;
}

A pseudo-classe :is() permite agrupar seletores e reduzir a repetição:

:is(header, footer) :is(h1, h2, h3) {
  color: blue;
}

Característica principal: Tolerância

Ao contrário das listas de seletores tradicionais, o :is() é tolerante (forgiving). Se um seletor na lista for inválido, o navegador ignorará o inválido e continuará a aplicar os estilos aos válidos.

3. :where(): Poder de especificidade zero

O seletor :where() funciona exatamente como o :is(), mas com uma diferença crucial: tem especificidade zero.

Por que a especificidade é importante

No CSS, o seletor mais específico ganha. Isto leva frequentemente a "guerras de especificidade" onde os programadores usam !important ou cadeias de seletores longas para sobrescrever estilos.

/* Isto tem impacto de especificidade zero */
:where(.content) p {
  color: gray;
}

/* Um seletor de classe simples irá agora sobrescrevê-lo facilmente */
.special-p {
  color: red; /* Ganha porque o :where() não adicionou nenhum "peso" */
}

O :where() é perfeito para CSS Resets e autores de bibliotecas que desejam fornecer estilos padrão que sejam fáceis de sobrescrever pelos utilizadores.

4. :nth-child avançado com of S

Provavelmente conhece o :nth-child(even), mas sabia que agora pode filtrar a seleção usando a palavra-chave of?

/* Seleciona o 2º item, mas APENAS entre aqueles com a classe .visible */
li:nth-child(2 of .visible) {
  background: yellow;
}

Isto é incrivelmente útil para listas dinâmicas onde alguns itens podem estar ocultos via display: none.

5. Calculadora de Especificidade: Entendendo a Matemática

A especificidade CSS é calculada usando três colunas: (A, B, C).

  • A: IDs
  • B: Classes, atributos e pseudo-classes
  • C: Elementos e pseudo-elementos

Como os novos seletores afetam isto:

  • :is() e :has(): A sua especificidade é igual à do seletor mais específico na sua lista de argumentos.
  • :where(): Tem sempre uma especificidade de (0, 0, 0).

FAQ: Perguntas Frequentes

P: O :has() é suportado em todos os navegadores?

R: Sim! Desde o final de 2023, o :has() é suportado nas versões mais recentes do Chrome, Safari, Firefox e Edge. É seguro usá-lo em projetos web modernos.

P: Quando devo usar :is() vs :where()?

R: Use :is() quando quiser que os seletores agrupados mantenham a sua especificidade normal. Use :where() quando quiser tornar os estilos muito fáceis de sobrescrever (comum em estilos base ou resets).

P: O :has() afeta a performance?

R: Os navegadores otimizaram o :has() significativamente. Embora usá-lo centenas de vezes numa única página possa ter um pequeno impacto, para a maioria dos padrões de UI, é extremamente rápido e eficiente.

Escreva um CSS mais limpo e declarativo

Ao dominar estes seletores, pode reduzir significativamente a quantidade de classes de "utilidade" no seu HTML e manter a sua lógica onde ela pertence: na sua folha de estilos CSS.

Quer ver como os seus seletores se classificam em peso? Experimente a nossa Calculadora de Especificidade de Seletores CSS (brevemente) para dominar a matemática do CSS.

Voltar ao blog