:not() :is() e :where()
Exclua elementos com :not(), corresponda a qualquer item de uma lista com :is() e use :where() para obter baixa especificidade.
:not() :is() e :where() é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
Pseudoclasse :not()
:not(selector) seleciona elementos que não correspondem ao seletor fornecido. Ela inverte a seleção.
<input type="text" placeholder="Text input (styled)" />
<input type="submit" value="Submit (unstyled)" />
:not() com vários argumentos
O CSS moderno permite vários argumentos dentro de :not() — ele corresponde a elementos que não correspondem a nenhum dos seletores listados:
<a href="#">Normal link</a> <a href="#" class="active">Active link</a> <a href="#" class="disabled">Disabled link</a>
Especificidade de :not()
A especificidade de :not() é a especificidade de seu argumento mais específico. :not(.active) tem especificidade de nível de classe (0,1,0).
Pseudoclasse :is()
:is() corresponde a qualquer elemento que corresponda a qualquer seletor de uma lista. Ela simplifica o agrupamento e reduz a repetição.
<header><h1>Site Title</h1><h2>Subtitle</h2><h3>Tagline</h3></header>
Especificidade de :is()
:is() assume a especificidade de seu argumento mais específico. Se a lista contiver um seletor de ID, toda a regra terá especificidade de ID.
<div id="header"><h2>Header H2 (crimson via ID)</h2></div>
<div class="card"><h2>Card H2 (crimson via class)</h2></div>
Análise tolerante de :is()
:is() usa uma análise tolerante de seletores: se algum seletor da lista for inválido, ele será ignorado silenciosamente e os demais ainda serão aplicados. Seletores regulares separados por vírgulas falham por completo se um deles for inválido.
Pseudoclasse :where()
:where() funciona exatamente como :is(), mas tem especificidade zero. Ela foi criada para classes utilitárias e estilos de redefinição que devem ser fáceis de substituir.
<h1>No top margin</h1><h2>No top margin</h2><h3>No top margin</h3>
:where() para redefinições
:where() é ideal para redefinições de CSS e estilos base que nunca devem vencer disputas de especificidade:
<ul><li>Item A</li><li>Item B</li></ul>
<ol><li>Step 1</li><li>Step 2</li></ol>
Comparação de especificidade
Resumo do comportamento da especificidade:
:is()— maior especificidade entre os argumentos:where()— sempre especificidade zero:not()— maior especificidade entre os argumentos
Encadeando :is() e :not()
Combine-os para criar seletores precisos e legíveis:
<nav class="nav"><a href="#">Link</a> <button>Button</button> <a href="#" class="disabled">Disabled Link</a></nav>
Suporte dos navegadores
:is() e :where() são compatíveis com todos os navegadores modernos. :not() com vários argumentos é compatível com navegadores modernos. Evite-os em projetos que exijam suporte ao IE11.
Verificação rápida
Qual pseudoclasse tem especificidade zero, independentemente de seus argumentos?
Recapitulação
:not() inverte a seleção e aceita vários argumentos. :is() corresponde a qualquer seletor de uma lista, usando a maior especificidade dessa lista. :where() faz o mesmo, mas com especificidade zero — é perfeita para redefinições. As três usam análise tolerante, ignorando silenciosamente seletores inválidos.
Perguntas Frequentes
A aula “:not() :is() e :where()” é grátis?
Sim — o texto completo de “:not() :is() e :where()” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “:not() :is() e :where()”?
Exclua elementos com :not(), corresponda a qualquer item de uma lista com :is() e use :where() para obter baixa especificidade. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “:not() :is() e :where()”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- :hover :focus :active e :visited
- :nth-child e :nth-of-type
- :not() :is() e :where()
- :checked :disabled e Pseudo-classes de Estado de Formulários