: non () - Trucchi CSS

Anonim

La :not()proprietà in CSS è una pseudo classe di negazione e accetta un semplice selettore o un elenco di selettori come argomento. Corrisponde a un elemento che non è rappresentato dall'argomento. L'argomento passato non può contenere selettori aggiuntivi o selettori di pseudo-elementi.

La possibilità di utilizzare un elenco di selettori come argomento è considerata sperimentale, sebbene il suo supporto stia crescendo al momento della stesura di questo documento, inclusi Safari (dal 2015), Firefox (da dicembre 2020) e Chrome (da gennaio 2021).

/* the X argument can be replaced with any simple selectors */ :not(X) ( property: value; )

In questo esempio abbiamo un elenco non ordinato con una singola classe nel file

  • : 
    

      

    •

    Il nostro CSS selezionerebbe tutti i file

  • elementi tranne quello (i) con una classe di .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    Puoi anche fare lo stesso usando pseudo classi che sono considerate un semplice selettore.

    p:not(:nth-child(2n+1)) ( font-size: 3em; )

    Tuttavia, se usiamo uno pseudo selettore di elementi come argomento, non produrrà il risultato atteso.

    :not(::first-line) ( /* ::first-line is a pseudo element selector and not a simple selector */ color: white; )

    Selettori complessi

    /* select all

    s that are not descendants of */ p:not(article *) ( )

    Esempio visivo

    Rappresentazione visiva dei vari usi di :not()

    Specificità

    La specificità della :not pseudo-classe è la specificità del suo argomento. La :not() pseudo-classe non si aggiunge alla specificità del selettore, a differenza di altre pseudo-classi.

    Le negazioni potrebbero non essere annidate, quindi :not(:not(… )) non è mai consentito. Gli autori dovrebbero anche notare che poiché gli pseudo-elementi non sono considerati un semplice selettore, non sono validi come argomento per :not(X). Fai attenzione quando usi i selettori di attributi poiché alcuni non sono ampiamente supportati come altri. È consentito il concatenamento di :not selettori con altri :notselettori.

    Supporto del browser

    La :not()pseudo classe è stata aggiornata nella specifica CSS Selectors Level 4 per consentire un elenco di argomenti. In CSS Selectors Level 3, era in grado di accettare solo un singolo selettore semplice. Di conseguenza, il supporto del browser è un po 'diviso tra le bozze di livello 3 e di livello 4.

    Selettori semplici

    IE Bordo Firefox Cromo Safari musica lirica
    9+ Tutti Tutti Tutti 12.1+ Tutti
    Android Chrome Android Firefox Browser Android iOS Safari Opera Mobile
    Tutti Tutti Tutti Tutti Tutti

    Elenchi di selettori

    Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

    Desktop

    Cromo Firefox IE Bordo Safari
    88 84 No 88 9

    Mobile / Tablet

    Android Chrome Android Firefox Android iOS Safari
    88 85 81 9.0-9.2

    Maggiori informazioni

    • Modulo selettori CSS Livello 3
    • Specifica di livello 4 dei selettori CSS