---
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>