:not()

Baseline Widely available

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

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 e .
  • 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 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
Um pouco de texto.


Um pouco mais de texto.

Mais um texto

Se obtém resultados como este:

Especificações

Specification
Selectors Level 4
# negation

Compatibilidade em Navegadores