: inte () - CSS-tricks

Anonim

Den :not()egendom i CSS är en negation pseudo klass och accepterar en enkel väljare eller en lista väljare som ett argument. Det matchar ett element som inte representeras av argumentet. Det godkända argumentet får inte innehålla ytterligare väljare eller några pseudoelementväljare.

Möjligheten att använda en lista med väljare som argument anses vara experimentell, även om den stöds växer när detta skrivs, inklusive Safari (sedan 2015), Firefox (sedan december 2020) och Chrome (sedan januari 2021).

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

I det här exemplet har vi en oordnad lista med en enda klass på

  • : 
    

      

    •

    Vår CSS skulle välja alla

  • element utom den / de med en klass av .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    Du kan också göra detsamma med pseudoklasser som anses vara en enkel väljare.

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

    Men om vi använder en pseudoelementväljare som vårt argument kommer det inte att ge det förväntade resultatet.

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

    Komplexa väljare

    /* select all

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

    Visuellt exempel

    Visuell representation av de olika användningarna av :not()

    Specificitet

    Pseudoklassens specificitet :not är specificiteten i dess argument. Den :not() pseudo-klassen inte lägga till i specificitet väljaren till skillnad från andra pseudo-klasser.

    Negationer kanske inte är kapslade så det :not(:not(… )) är aldrig tillåtet. Författare bör också notera att eftersom pseudoelement inte betraktas som en enkel väljare, är de inte giltiga som argument för :not(X). Var uppmärksam när du använder attributväljare eftersom vissa inte stöds allmänt som andra. Kedjeväljare :not med andra :not väljare är tillåtna.

    Webbläsarstöd

    Den :not()pseudo klassen har uppdaterats i CSS väljarna Nivå 4 specifikation för att möjliggöra en argumentlistan. I CSS-väljare nivå 3 kunde den bara acceptera en enda enkel väljare. Som ett resultat är webbläsarstöd lite uppdelat mellan utkasten på nivå 3 och nivå 4.

    Enkla väljare

    IE Kant Firefox Krom Safari Opera
    9+ Allt Allt Allt 12.1+ Allt
    Android Chrome Android Firefox Android-webbläsare iOS Safari Opera Mobile
    Allt Allt Allt Allt Allt

    Väljarlistor

    Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

    Skrivbord

    Krom Firefox IE Kant Safari
    88 84 Nej 88 9

    Mobil / surfplatta

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

    Mer information

    • CSS-väljarmodul nivå 3
    • CSS-väljare nivå 4-specifikation