diff options
Diffstat (limited to 'files/pt-br/web/css/_colon_not/index.html')
-rw-r--r-- | files/pt-br/web/css/_colon_not/index.html | 75 |
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"><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> |