: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> (en-US) 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