W3docs
pt
Entrar

CSS :not() Pseudo Classe

A pseudo-classe CSS :not() seleciona e estiliza elementos que não correspondem a uma lista de seletores. Leia mais e veja exemplos.

A pseudo-classe CSS :not() seleciona todos os elementos que não correspondem ao seletor passado a ela. Por inverter uma correspondência, também é chamada de pseudo-classe de negação.

Esta página explica o que :not() faz, quando utilizá-la, como ela afeta a especificidade e as armadilhas que costumam pegar as pessoas de surpresa — com exemplos executáveis que você pode editar.

O que é :not()

:not() é uma pseudo-classe funcional: recebe um seletor como argumento e corresponde a qualquer elemento que o argumento não seleciona. Os argumentos suportados incluem:

  • Seletor de tipo (ex.: p, span)
  • Seletor de classe (ex.: .element)
  • Seletor de ID (ex.: #header)
  • Seletor de pseudo-classe (ex.: :last-child, :first-of-type)
  • Seletor de atributo (ex.: [type="text"])
  • O seletor universal (*)

No Selectors Level 3, o argumento precisava ser um único seletor simples. O Selectors Level 4 expandiu essa capacidade para aceitar uma lista separada por vírgulas e seletores compostos ou complexos, permitindo escrever :not(.a, .b) ou :not(ul li.first) em navegadores modernos.

Quando usar

Recorra ao :not() quando for mais curto descrever o que você quer excluir do que listar tudo o que quer incluir:

  • Estilizar todos os itens de lista exceto o último: li:not(:last-child).
  • Estilizar todos os links que não são externos: a:not([target="_blank"]).
  • Adicionar espaçamento entre irmãos sem margem final: .item:not(:first-child) { margin-top: 1rem; }.
  • Desativar estilização para uma variante: .btn:not(.btn-ghost) { background: #8ebf42; }.

Notas Importantes

  • O seletor :not() funciona com pseudo-classes, mas não suporta pseudo-elementos.
  • A palavra-chave :not() em si não adiciona especificidade — apenas o seu argumento o faz. Assim, :not(.foo) tem a mesma especificidade que .foo (0, 1, 0), e um simples :not(p) pesa o mesmo que p (0, 0, 1). Isso torna o :not() mais econômico do que uma classe extra equivalente e pode surpreender você em conflitos de sobreposição.
  • :not(.foo) corresponde a qualquer elemento que não seja .foo, incluindo <html> e <body>. Sempre combine-o com um contexto como ul li:not(.foo) para que não vaze para todo o documento.
  • O seletor :not() se aplica a todos os elementos que não correspondem ao argumento, não apenas a um único elemento.
  • Um :not() vazio — :not() sem nada dentro — é inválido e toda a regra é ignorada.

Versão

Selectors Level 3

Selectors Level 4

Sintaxe

Sintaxe CSS :not()

selector:not(argument) {
  css declarations;
}

Exemplo da pseudo-classe :not():

Exemplo de código CSS :not()

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        color: #666;
      }
      :not(p) {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:not() selector example</h2>
    <p>Lorem Ipsum is simply dummy text</p>
    <p>Lorem Ipsum is simply dummy text</p>
    <div>Lorem Ipsum is simply dummy text</div>
    <a href="https://www.w3docs.com" target="_blank">Link to W3docs</a>
  </body>
</html>
Experimente Você Mesmo »

No exemplo a seguir, há uma lista não ordenada com uma única classe na tag <li>.

Exemplo da pseudo-classe :not() com a tag <li>:

Outro exemplo de código CSS :not()

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text-blue {
        color: blue;
      }
      ul li:not(.text-blue) {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:not() selector example</h2>
    <ul>
      <li>List item 1</li>
      <li class="text-blue">List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>
Experimente Você Mesmo »

Passando uma lista de seletores (Selectors Level 4)

Os navegadores modernos permitem excluir vários seletores de uma só vez, separando-os por vírgulas dentro de um único :not(). A regra abaixo colore todos os itens da lista exceto o silenciado e o ativo:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li {
        color: #8ebf42;
      }
      li:not(.muted, .active) {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>:not() with a selector list</h2>
    <ul>
      <li>Highlighted item</li>
      <li class="muted">Muted item</li>
      <li class="active">Active item</li>
      <li>Highlighted item</li>
    </ul>
  </body>
</html>

Isso equivale ao mais antigo e verboso li:not(.muted):not(.active), que você pode usar caso precise suportar navegadores muito antigos.

Seletores relacionados

Prática

Prática
O que a pseudo-classe :not() em CSS faz?
O que a pseudo-classe :not() em CSS faz?
Was this page helpful?