:not()

Resumo

A pseudo-classe CSS de negação, :not(X), é uma notação funcional que recebe um seletor simples X como argumento. Ela seleciona um elemento que não é representado por seu argumento. X não pode conter outro seletor de negação.

Observações:
  • Seletores inúteis podem ser escritos usando esta pseudo-classe. Por exemplo, :not(*) seleciona qualquer elemento que não é algum elemento, então a regra nunca é aplicada.
  • É possível sobreescrever outras regras. E.g. foo:not(bar) vai selecionar os mesmos elementos do que o mais simples foo. No entanto a especificação é maior no exemplo com :not.
  • :not(foo){} vai selecionar tudo que não for foo, incluindo os elementos <html> e <body>.
  • Este seletor apenas se aplica a um elemento; não se pode usa-lo para excluir todos os seus ancestores. Por exemplo, body :not(table) a ainda vai ser aplicado a links dentro de tabelas, já que <tr> vai ser selecionado pelo :not() do seletor.

Sintaxe

:not(selector) { style properties }

Exemplos

p:not(.classico) { color: red; }
body *:not(p) { color: green; }

Dado o CSS acima e o HTML abaixo...

<p>Um pouco de texto.</p>
<p class="classico">Um pouco mais de texto.</p>
<span>Mais um texto<span>

Se obtém resultados como este:

Especificações

Especificação Status Comentário
Selectors Level 4
The definition of ':not()' in that specification.		 Rascunho atual Extende seus argumentos para permitir seletores não-simples.
Selectors Level 3
The definition of ':not()' in that specification.		 Recomendação Definição inicial.

Compatibilidade em Navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

Recurso Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 1.0 1.0 (1.7 or earlier) 9.0 9.5 3.2
Argumentos extendidos Não suportado Não suportado Não suportado Não suportado Não suportado
Recurso Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico 2.1 1.0 (1) 9.0 10.0 3.2
Argumentos extendidos Não suportado Não suportado Não suportado Não suportado Não suportado

 

Tópicos relacionados
  1. CSS
  2. CSS Reference
  3. CSS Selectors
  4. Guias
    1. Using the :target pseudo-class in selectors [Traduzir]
  5. Basic Selectors
    1. Type selectors [Traduzir]
    2. Class selectors [Traduzir]
    3. Seletores de ID
    4. Universal selectors [Traduzir]
    5. Seletor de atributos
  6. Combinators
    1. Adjacent sibling combinator [Traduzir]
    2. General sibling selectors
    3. Child selectors
    4. Descendant combinator [Traduzir]
    5. Column combinator [Traduzir]
  7. Pseudo-classes
    1. :active
    2. :any-link [Traduzir]
    3. :checked
    4. :blank [Traduzir]
    5. :default [Traduzir]
    6. :defined [Traduzir]
    7. :dir() [Traduzir]
    8. :disabled [Traduzir]
    9. :empty
    10. :enabled [Traduzir]
    11. :first [Traduzir]
    12. :first-child
    13. :first-of-type
    14. :fullscreen [Traduzir]
    15. :focus
    16. :focus-within [Traduzir]
    17. :has() [Traduzir]
    18. :host() [Traduzir]
    19. :host-context() [Traduzir]
    20. :hover
    21. :indeterminate [Traduzir]
    22. :in-range [Traduzir]
    23. :invalid
    24. :is() (:matches(), :any()) [Traduzir]
    25. :lang() [Traduzir]
    26. :last-child
    27. :last-of-type
    28. :left [Traduzir]
    29. :link
    30. :not()
    31. :nth-child()
    32. :nth-last-child()
    33. :nth-last-of-type() [Traduzir]
    34. :nth-of-type()
    35. :only-child
    36. :only-of-type
    37. :optional
    38. :out-of-range [Traduzir]
    39. :placeholder-shown [Traduzir]
    40. :read-only [Traduzir]
    41. :read-write [Traduzir]
    42. :required
    43. :right [Traduzir]
    44. :root
    45. :scope [Traduzir]
    46. :target [Traduzir]
    47. :valid
    48. :visited
    49. :where() [Traduzir]
  8. Pseudo-elements
    1. ::-moz-progress-bar [Traduzir]
    2. ::-moz-range-progress [Traduzir]
    3. ::-moz-range-thumb [Traduzir]
    4. ::-moz-range-track [Traduzir]
    5. ::-ms-browse [Traduzir]
    6. ::-ms-check [Traduzir]
    7. ::-ms-clear [Traduzir]
    8. ::-ms-expand [Traduzir]
    9. ::-ms-fill [Traduzir]
    10. ::-ms-fill-lower [Traduzir]
    11. ::-ms-fill-upper [Traduzir]
    12. ::-ms-reveal [Traduzir]
    13. ::-ms-thumb [Traduzir]
    14. ::-ms-ticks-after [Traduzir]
    15. ::-ms-ticks-before [Traduzir]
    16. ::-ms-tooltip
    17. ::-ms-track [Traduzir]
    18. ::-ms-value [Traduzir]
    19. ::-webkit-progress-bar [Traduzir]
    20. ::-webkit-progress-value [Traduzir]
    21. ::-webkit-slider-runnable-track [Traduzir]
    22. ::-webkit-slider-thumb [Traduzir]
    23. ::after (:after)
    24. ::backdrop
    25. ::before (:before)
    26. ::cue [Traduzir]
    27. ::first-letter (:first-letter)
    28. ::first-line (:first-line) [Traduzir]
    29. ::grammar-error [Traduzir]
    30. ::placeholder [Traduzir]
    31. ::selection [Traduzir]
    32. ::slotted() [Traduzir]
    33. ::spelling-error [Traduzir]