W3docs
it
Accedi

CSS :not() Pseudo-Classe

La pseudo-classe CSS :not() seleziona e stilizza gli elementi che non corrispondono a un elenco di selettori. Scopri di più con esempi pratici.

La pseudo-classe CSS :not() seleziona ogni elemento che non corrisponde al selettore passato come argomento. Poiché inverte una corrispondenza, è anche chiamata pseudo-classe di negazione.

Questa pagina spiega cosa fa :not(), quando usarla, come influisce sulla specificità e le insidie più comuni — con esempi modificabili ed eseguibili.

Cos'è :not()

:not() è una pseudo-classe funzionale: accetta un selettore come argomento e corrisponde a qualsiasi elemento che l'argomento non seleziona. Gli argomenti supportati includono:

  • Selettore di tipo (ad es., p, span)
  • Selettore di classe (ad es., .element)
  • Selettore di ID (ad es., #header)
  • Selettore di pseudo-classe (ad es., :last-child, :first-of-type)
  • Selettore di attributo (ad es., [type="text"])
  • Il selettore universale (*)

In Selectors Level 3 l'argomento doveva essere un singolo selettore semplice. Selectors Level 4 lo ha esteso per accettare un elenco separato da virgole e selettori composti o complessi, quindi nei browser moderni è possibile scrivere :not(.a, .b) o :not(ul li.first).

Quando usarla

Usa :not() quando è più conciso descrivere ciò che vuoi escludere piuttosto che elencare tutto ciò che vuoi includere:

  • Stilizzare ogni elemento di lista tranne l'ultimo: li:not(:last-child).
  • Stilizzare ogni link che non è esterno: a:not([target="_blank"]).
  • Aggiungere spaziatura tra elementi fratelli senza margine finale: .item:not(:first-child) { margin-top: 1rem; }.
  • Disabilitare lo stile per una variante: .btn:not(.btn-ghost) { background: #8ebf42; }.

Note importanti

  • Il selettore :not() funziona con le pseudo-classi, ma non supporta gli pseudo-elementi.
  • La parola chiave :not() di per sé non aggiunge specificità — la aggiunge solo il suo argomento. Quindi :not(.foo) ha la stessa specificità di .foo (0, 1, 0), e un semplice :not(p) pesa quanto p (0, 0, 1). Questo rende :not() meno costosa di una classe aggiuntiva equivalente e può sorprendere nelle battaglie di override.
  • :not(.foo) corrisponde a qualsiasi cosa non sia .foo, inclusi <html> e <body>. Abbinala sempre a un contesto come ul li:not(.foo) per evitare che si applichi all'intero documento.
  • Il selettore :not() si applica a ogni elemento che non corrisponde all'argomento, non solo a un singolo elemento.
  • Un :not() vuoto — :not() senza nulla all'interno — è non valido e l'intera regola viene ignorata.

Versione

Selectors Level 3

Selectors Level 4

Sintassi

Sintassi CSS :not()

selector:not(argument) {
  css declarations;
}

Esempio della pseudo-classe :not():

Esempio di codice 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>
Provalo tu stesso »

Nell'esempio seguente è presente un elenco non ordinato con una singola classe sul tag <li>.

Esempio della pseudo-classe :not() con il tag <li>:

Altro esempio di codice 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>
Provalo tu stesso »

Passare un elenco di selettori (Selectors Level 4)

I browser moderni consentono di escludere più selettori contemporaneamente separandoli con virgole all'interno di un singolo :not(). La regola seguente colora ogni elemento di lista tranne quello attenuato e quello attivo:

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

Questo è equivalente alla versione più vecchia e verbosa li:not(.muted):not(.active), che puoi usare se devi supportare browser molto datati.

Selettori correlati

Esercitazione

Pratica
Cosa fa la pseudo-classe :not() in CSS?
Cosa fa la pseudo-classe :not() in CSS?
Was this page helpful?