:is() e :where(): agrupar seletores sem repetir
Uma lista de seletores como 'header nav a, header aside a, footer nav a, footer aside a' cresce rápido demais para ser escrita (ou lida) à mão sempre que um novo contexto aparece.
Estudar esta lição interativa →Repetir o mesmo bloco de declarações para vários seletores parecidos (header a, footer a, aside a { color: ...; }) já é comum, mas quando os contextos se combinam (links dentro de nav ou aside, dentro de header ou footer), a lista explode: header nav a, header aside a, footer nav a, footer aside a. A pseudoclasse :is() resolve isso agrupando as opções dentro de si: :is(header, footer) :is(nav, aside) a descreve exatamente o mesmo alvo, numa fração do tamanho.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. :is(header, footer) a substitui duas regras separadas (header a, footer a) por uma única declaração.
Existe uma segunda pseudoclasse quase idêntica na sintaxe, :where(), mas com uma diferença importante de especificidade: :is() "herda" a especificidade do seletor mais específico que ela contém (se um dos seletores agrupados for um id, a regra toda passa a valer como se tivesse um id); :where(), ao contrário, sempre tem especificidade zero, não importa o que exista dentro dela.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. :where(.aviso) tem especificidade zero: mesmo vindo por último no CSS, perde para o seletor de tag simples p, que tem mais especificidade.
Use :where() para CSS-base, estilos "de largada" que qualquer regra normal, mesmo simples, deve conseguir sobrescrever depois sem luta de especificidade (Módulo 4). Use :is() quando quiser só o agrupamento, sem abrir mão da força normal de especificidade da regra. Confundir as duas é um erro sutil: uma regra de reset escrita com :is() em vez de :where() pode acabar difícil demais de sobrescrever depois, o mesmo problema de "especificidade alta demais" visto no Módulo 4.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Agrupe as duas regras com :is().