: ikke () - CSS-triks

Anonim

Den :not()eiendom i CSS er en negasjon pseudo klasse og aksepterer en enkel velger eller en velger liste som et argument. Det samsvarer med et element som ikke er representert av argumentet. Det godkjente argumentet inneholder kanskje ikke flere velgere eller noen pseudo-elementvelgere.

Evnen til å bruke en liste over velgerne som et argument anses å være eksperimentell, selv om den støttes vokser i skrivende stund, inkludert Safari (siden 2015), Firefox (siden desember 2020) og Chrome (siden januar 2021).

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

I dette eksemplet har vi en uordnet liste med en enkelt klasse på

  • : 
    

      

    •

    Vår CSS ville velge alle

  • elementer bortsett fra elementene med en klasse på .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    Du kan også gjøre det samme ved hjelp av pseudoklasser som regnes som en enkel velger.

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

    Men hvis vi bruker en pseudo-elementvelger som vårt argument, vil det ikke gi det forventede resultatet.

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

    Komplekse velgere

    /* select all

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

    Visuelt eksempel

    Visuell fremstilling av den varierte bruken av :not()

    Spesifisitet

    Spesifikasjonen til :not pseudoklassen er spesifisiteten til argumentet. Den :not() pseudo-klassen ikke legge til velger spesifisitet, i motsetning til andre pseudo-klasser.

    Negasjoner kan ikke være nestet, så det :not(:not(… )) er aldri tillatt. Forfattere bør også merke seg at siden pseudoelementer ikke betraktes som en enkel velger, er de ikke gyldige som et argument for :not(X). Vær oppmerksom når du bruker attributtvelgere, da noen ikke støttes bredt som andre. Kjettingvelgere :not med andre :not velgere er tillatt.

    Nettleserstøtte

    Den :not()pseudo klassen har blitt oppdatert i CSS velgere Nivå 4-spesifikasjonen å tillate en argumentliste. I CSS Selectors Level 3 var det bare i stand til å godta en enkelt enkel velger. Som et resultat er nettleserstøtten litt delt mellom utkast til nivå 3 og nivå 4.

    Enkle velgere

    DVS Kant Firefox Chrome Safari Opera
    9+ Alle Alle Alle 12.1+ Alle
    Android Chrome Android Firefox Android-nettleser iOS Safari Opera Mobile
    Alle Alle Alle Alle Alle

    Velgerlister

    Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

    Desktop

    Chrome Firefox DVS Kant Safari
    88 84 Nei 88 9

    Mobil / nettbrett

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

    Mer informasjon

    • CSS Selectors Module Level 3
    • CSS Selectors nivå 4 spesifikasjon