css, frontend

Um recurso incrível, otimize seu CSS com o seletor :where()

13/11/2025

Um recurso incrível, otimize seu CSS com o seletor :where()

Se você já se perguntou o que diferencia um desenvolvedor júnior de CSS de um sênior, a resposta está em escrever um código mais limpo, eficiente e fácil de manter. Um exemplo claro é como utilizamos seletores.

O problema

Imagine que você precise estilizar vários elementos h1, h2, h3 e h4 dentro da tag main.

main h1, main h2, main h3, main h4 {
  color: red;
}

Embora isso funcione, é verboso e pode dificultar a manutenção, especialmente em projetos maiores.

A solução

Ao invés disso, você pode usar o seletor :where(), que torna o código mais claro e organizado:

main :where(h1, h2, h3, h4) {
  color: red;
}

Por que usar :where()?

  • Simplicidade: Elimina redundâncias, reduzindo a chance de erros.
  • Legibilidade: Facilita o entendimento do código para você e outros desenvolvedores.
  • Manutenção: Permite adicionar ou alterar seletores facilmente sem precisar repetir o prefixo.

Exemplo Prático

Aqui está um exemplo completo para você experimentar:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo com :where()</title>
  <style>
    main :where(h1, h2, h3, h4) {
      color: red;
      font-family: Arial, sans-serif;
      text-align: center;
    }
  </style>
</head>
<body>
  <main>
    <h1>Título Principal</h1>
    <h2>Subtítulo</h2>
    <h3>Seção</h3>
    <h4>Subseção</h4>
  </main>
</body>
</html>

Conclusão

A adoção de boas práticas como essa não apenas melhora seu código, mas também aumenta sua produtividade e reputação como desenvolvedor.