: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.
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
BCD tables only load in the browser