:not()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2021.

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.

Nota: 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

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

Dado o CSS acima e o HTML abaixo...

html
<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

Specification
Selectors Level 4
# negation

Compatibilidade em Navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Negation pseudo-class selector (:not())
Selector list argument

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support