1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
---
title: ':not()'
slug: 'Web/CSS/:not'
tags:
- CSS
- Composição
- Layout
- Pseudo-classe CSS
- Referencia
- Web
translation_of: 'Web/CSS/:not'
---
<div>{{ CSSRef() }}</div>
<h2 id="Summary" name="Summary">Resumo</h2>
<p>A <a href="/pt-BR/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classe CSS</a> de <strong>negação</strong>, <code>:not(X)</code>, é uma notação funcional que recebe um seletor simples X como argumento. Ela seleciona um elemento que não é representado por seu argumento. <var>X</var> não pode conter outro seletor de negação.</p>
<div class="note"><strong>Observações:</strong>
<ul>
<li>Seletores inúteis podem ser escritos usando esta pseudo-classe. Por exemplo, <code>:not(*)</code> seleciona qualquer elemento que não é algum elemento, então a regra nunca é aplicada.</li>
<li>É possível sobreescrever outras regras. E.g. <code>foo:not(bar)</code> vai selecionar os mesmos elementos do que o mais simples foo. No entanto a <a href="/pt-BR/docs/Web/CSS/Specificity" title="Especificação">especificação</a> é maior no exemplo com <code>:not</code>.</li>
<li><code>:not(foo){} vai selecionar tudo que não for foo</code>, <strong>incluindo os elementos {{HTMLElement("html")}} e {{HTMLElement("body")}}.</strong></li>
<li>Este seletor apenas se aplica a um elemento; não se pode usa-lo para excluir todos os seus ancestores. Por exemplo, <code>body :not(table) a</code> ainda vai ser aplicado a links dentro de tabelas, já que {{HTMLElement("tr")}} vai ser selecionado pelo <code>:not()</code> do seletor.</li>
</ul>
</div>
<h2 id="Syntax" name="Syntax">Sintaxe</h2>
<pre class="syntaxbox notranslate">:not(selector) { <em>style properties</em> }</pre>
<h2 id="Exemplos" name="Exemplos">Exemplos</h2>
<pre class="brush: css notranslate">p:not(.classico) { color: red; }
body *:not(p) { color: green; }</pre>
<p>Dado o CSS acima e o HTML abaixo...</p>
<pre class="brush: html notranslate"><p>Um pouco de texto.</p>
<p class="classico">Um pouco mais de texto.</p>
<span>Mais um texto<span>
</pre>
<p>Se obtém resultados como este:</p>
<p>{{ EmbedLiveSample('Exemplos', '', '', '', 'Web/CSS/:not') }}</p>
<h2 id="Specifications" name="Specifications">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS4 Selectors', '#negation', ':not()') }}</td>
<td>{{ Spec2('CSS4 Selectors') }}</td>
<td>Extende seus argumentos para permitir seletores não-simples.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Selectors', '#negation', ':not()') }}</td>
<td>{{ Spec2('CSS3 Selectors') }}</td>
<td>Definição inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade em Navegadores</h2>
<p>{{Compat("css.selectors.not")}}</p>
|
