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) aainda 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
Estamos convertendo nossos dados de compatibilidade para o formato JSON.
Esta tabela de compatibilidade ainda usa o formato antigo,
pois ainda não convertemos os dados que ela contém.
Descubra como você pode ajudar!
| Recurso | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Suporte básico | 1.0 | 1.0 (1.7 or earlier) | 9.0 | 9.5 | 3.2 |
| Argumentos extendidos | Não suportado | Não suportado | Não suportado | Não suportado | Não suportado |
| Recurso | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Suporte básico | 2.1 | 1.0 (1) | 9.0 | 10.0 | 3.2 |
| Argumentos extendidos | Não suportado | Não suportado | Não suportado | Não suportado | Não suportado |