aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/web/css/_colon_not/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/pt-br/web/css/_colon_not/index.html')
-rw-r--r--files/pt-br/web/css/_colon_not/index.html75
1 files changed, 75 insertions, 0 deletions
diff --git a/files/pt-br/web/css/_colon_not/index.html b/files/pt-br/web/css/_colon_not/index.html
new file mode 100644
index 0000000000..1cd6b3061e
--- /dev/null
+++ b/files/pt-br/web/css/_colon_not/index.html
@@ -0,0 +1,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">&lt;p&gt;Um pouco de texto.&lt;/p&gt;
+&lt;p class="classico"&gt;Um pouco mais de texto.&lt;/p&gt;
+&lt;span&gt;Mais um texto&lt;span&gt;
+</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>