CSS :where() e :is(): Especificidade, Resets e Manutenção

Você já escreveu o mesmo bloco de CSS três vezes só mudando o seletor? Essa é exatamente a dor que :is() e :where() resolvem — e a diferença entre os dois é mais importante do que parece.

Esse CSS te parece familiar:

header a,
footer a,
nav a {
  color: blue;
  text-decoration: none;
}

Repetindo a mesma regra pra três contextos diferentes. Agora imagina que você tem dez contextos. E que cada um tem três variações de estado — :hover, :focus, :visited. O arquivo CSS vira uma lista telefônica.

O CSS moderno tem uma resposta pra isso. Duas, na verdade — e elas parecem iguais mas se comportam diferente num detalhe que vai te salvar de bugs sutis.

:is() — agrupe seletores sem repetição

O :is() aceita uma lista de seletores e aplica o estilo pra qualquer um que bater. O bloco acima vira:

:is(header, footer, nav) a {
  color: blue;
  text-decoration: none;
}

Uma linha, mesmo resultado. O navegador interpreta isso exatamente como a versão repetida — semanticamente são equivalentes.

Fica mais interessante quando você combina com pseudo-classes:

/* Antes — repetindo pra cada estado */
button:hover,
button:focus,
button:active {
  background: darkblue;
}

/* Depois — limpo */
button:is(:hover, :focus, :active) {
  background: darkblue;
}

Ou pra estilizar headings de uma vez:

/* Todos os headings dentro de article */
article :is(h1, h2, h3, h4) {
  font-family: Georgia, serif;
  line-height: 1.3;
}

:where() — igualzinho, mas sem peso de especificidade

Aqui mora a diferença que importa.

Especificidade em CSS é o sistema de pontuação que decide qual regra vence quando duas se contradizem. Um seletor de ID vale mais que uma classe, que vale mais que uma tag. Quando você usa :is(), a especificidade do seletor mais forte dentro dos parênteses se propaga pra regra inteira.

/* :is() herda a especificidade do #header — alta */
:is(#header, .nav, footer) a {
  color: blue;
}
/* ↑ esse seletor tem especificidade de ID
   por causa do #header, mesmo que o elemento
   seja .nav ou footer */

O :where() funciona igual em comportamento — mas tem especificidade zero. Sempre. Não importa o que você colocar dentro.

/* :where() — especificidade zero */
:where(#header, .nav, footer) a {
  color: blue;
}
/* ↑ fácil de sobrescrever — qualquer seletor
   de classe ou tag já ganha */

Na prática isso significa que :where() é ideal pra estilos base e resets — você define sem travar o desenvolvedor que vai customizar depois.

A diferença na vida real

/* base.css */
:is(article, section) p {
  color: gray;
}

/* theme.css — não vai funcionar */
p {
  color: black;
}
/* :is(article, section) p tem
   especificidade maior que p */

/* base.css */
:where(article, section) p {
  color: gray;
}

/* theme.css — funciona */
p {
  color: black;
}
/* :where() tem especificidade zero
   qualquer p ganha na sobreposição */

Um exemplo que junta os dois

Num design system, você usaria os dois em camadas diferentes:

/* Camada base — :where() pra não travar ninguém */
:where(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 0.5em;
  line-height: 1.2;
}

/* Camada de componente — :is() pra contextos específicos */
.card :is(h2, h3) {
  font-size: 1.25rem;
  color: var(--color-heading);
}

/* Estados interativos — :is() porque precisa de peso */
.btn:is(:hover, :focus-visible) {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}