: ikke () - CSS-tricks

Anonim

Den :not()ejendom i CSS er en negation pseudo klasse og accepterer en simpel selector eller en selector liste som argument. Det matcher et element, der ikke er repræsenteret af argumentet. Det godkendte argument indeholder muligvis ikke yderligere vælgere eller nogen pseudo-elementvælgere.

Evnen til at bruge en liste over vælgere som et argument betragtes som eksperimentel, selv om den understøttes vokser på tidspunktet for denne skrivning, inklusive Safari (siden 2015), Firefox (siden december 2020) og Chrome (siden januar 2021).

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

I dette eksempel har vi en ikke-ordnet liste med en enkelt klasse på

  • : 
    

      

    •

    Vores CSS vælger alle

  • elementer undtagen elementerne med en klasse af .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    Du kan også gøre det samme ved hjælp af pseudoklasser, der betragtes som en simpel vælger.

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

    Men hvis vi bruger en pseudo-elementvælger som vores argument, vil det ikke give det forventede resultat.

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

    Komplekse vælgere

    /* select all

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

    Visuelt eksempel

    Visuel gengivelse af de forskellige anvendelser af :not()

    Specificitet

    Pseudoklassens specificitet :not er specificiteten af ​​dens argument. Den :not() pseudo-klassen ikke føje til vælgeren specificitet, i modsætning til andre pseudo-klasser.

    Negationer er muligvis ikke indlejrede, så det :not(:not(… )) er aldrig tilladt. Forfattere skal også bemærke, at da pseudoelementer ikke betragtes som en simpel vælger, er de ikke gyldige som et argument til :not(X). Vær opmærksom, når du bruger attributvælgere, da nogle ikke understøttes bredt som andre. Kædevælgere :not med andre :not vælgere er tilladte.

    Browsersupport

    Den :not()pseudo-klasse er blevet opdateret i CSS vælgere Level 4 specifikation for at tillade et argument listen. I CSS Selectors niveau 3 var det kun i stand til at acceptere en enkelt simpel vælger. Som et resultat er browsersupport lidt opdelt mellem niveau 3 og niveau 4 kladder.

    Enkle vælgere

    IE Edge Firefox Chrome Safari Opera
    9+ Alle Alle Alle 12.1+ Alle
    Android Chrome Android Firefox Android-browser iOS Safari Opera Mobile
    Alle Alle Alle Alle Alle

    Vælgerlister

    Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

    Desktop

    Chrome Firefox IE Edge Safari
    88 84 Ingen 88 9

    Mobil / tablet

    Android Chrome Android Firefox Android iOS Safari
    88 85 81 9,0-9,2

    Mere information

    • CSS-vælgermodul niveau 3
    • CSS Selectors niveau 4 specifikation