:not()

Resumo

A pseudo-classe CSS de negação, :not(X), é uma notação funcional que recebe um seletor simples X como argumento. Ela seleciona um elemento que não é representado por seu argumento. X não pode conter outro seletor de negação.

Observações:
  • Seletores inúteis podem ser escritos usando esta pseudo-classe. Por exemplo, :not(*) seleciona qualquer elemento que não é algum elemento, então a regra nunca é aplicada.
  • É possível sobreescrever outras regras. E.g. foo:not(bar) vai selecionar os mesmos elementos do que o mais simples foo. No entanto a especificação é maior no exemplo com :not.
  • :not(foo){} vai selecionar tudo que não for foo, incluindo os elementos <html> e <body>.
  • Este seletor apenas se aplica a um elemento; não se pode usa-lo para excluir todos os seus ancestores. Por exemplo, body :not(table) a ainda vai ser aplicado a links dentro de tabelas, já que <tr> vai ser selecionado pelo :not() do seletor.

Sintaxe

:not(selector) { style properties }

Exemplos

p:not(.classico) { color: red; }
body *:not(p) { color: green; }

Dado o CSS acima e o HTML abaixo...

<p>Um pouco de texto.</p>
<p class="classico">Um pouco mais de texto.</p>
<span>Mais um texto<span>

Se obtém resultados como este:

Especificações

Especificação Status Comentário
Selectors Level 4
The definition of ':not()' in that specification.		 Rascunho atual Extende seus argumentos para permitir seletores não-simples.
Selectors Level 3
The definition of ':not()' in that specification.		 Recomendação Definição inicial.

Compatibilidade em Navegadores

BCD tables only load in the browser