: nie () - CSS-Tricks

Anonim

:not()Nieruchomość w CSS jest negacją klasa pseudo i akceptuje prosty przełącznik lub listę wyboru jako argument. Dopasowuje element, który nie jest reprezentowany przez argument. Przekazany argument nie może zawierać dodatkowych selektorów ani żadnych selektorów pseudoelementów.

Możliwość korzystania z listy selektorów jako argumentu jest uważana za eksperymentalną, chociaż jej obsługiwana liczba rośnie w momencie pisania tego tekstu, w tym Safari (od 2015), Firefox (od grudnia 2020) i Chrome (od stycznia 2021).

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

W tym przykładzie mamy nieuporządkowaną listę z jedną klasą w

  • : 
    

      

    •

    Nasz CSS wybrałby wszystkie pliki

  • elementy z wyjątkiem jednego (ów) z klasą .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    Możesz również zrobić to samo, używając pseudoklas, które są uważane za prosty selektor.

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

    Jeśli jednak użyjemy selektora pseudo elementu jako naszego argumentu, nie przyniesie to oczekiwanego wyniku.

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

    Złożone selektory

    /* select all

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

    Przykład wizualny

    Wizualne przedstawienie różnych zastosowań :not()

    Specyficzność

    Specyfiką :not pseudoklasy jest specyfika jej argumentu. W :not() przeciwieństwie do innych pseudoklas, pseudoklasa nie zwiększa specyficzności selektora.

    Negacje nie mogą być zagnieżdżane, więc :not(:not(… )) nigdy nie jest dozwolone. Autorzy powinni również zauważyć, że ponieważ pseudoelementy nie są uważane za prosty selektor, nie są one poprawne jako argument :not(X). Zachowaj ostrożność podczas korzystania z selektorów atrybutów, ponieważ niektóre z nich nie są tak szeroko obsługiwane, jak inne. Dozwolone jest łączenie :not selektorów w łańcuchy z innymi :notselektorami.

    Wsparcie przeglądarki

    :not()Klasa pseudo został zaktualizowany w specyfikacji CSS Level 4 selektorów aby umożliwić listę argumentów. W selektorach CSS na poziomie 3 był w stanie zaakceptować tylko jeden prosty selektor. W rezultacie obsługa przeglądarek jest nieco podzielona na wersje robocze poziomu 3 i 4.

    Proste selektory

    TO ZNACZY Brzeg Firefox Chrom Safari Opera
    9+ Wszystko Wszystko Wszystko 12.1+ Wszystko
    Android Chrome Android Firefox Przeglądarka Android iOS Safari Opera Mobile
    Wszystko Wszystko Wszystko Wszystko Wszystko

    Listy selektorów

    Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.

    Pulpit

    Chrom Firefox TO ZNACZY Brzeg Safari
    88 84 Nie 88 9

    Telefon komórkowy / tablet

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

    Więcej informacji

    • Moduł selektorów CSS Poziom 3
    • Specyfikacja selektorów CSS poziomu 4