: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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Negation pseudo-class selector (:not())Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 9.5Safari Full support 3.2WebView Android Full support 2Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
Selector list argumentChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari Full support 9WebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS Full support 9Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support