: nie () - Triky CSS

Anonim

:not()Nehnuteľnosť v CSS je negáciou pseudo class a prijíma jednoduchý volič alebo zoznam voliča ako argument. Zhoduje sa s prvkom, ktorý nie je reprezentovaný argumentom. Predaný argument nemusí obsahovať ďalšie selektory ani žiadne selektory pseudoprvkov.

Schopnosť použiť zoznam selektorov ako argument sa považuje za experimentálnu, aj keď v čase písania tohto článku jeho podpora rastie, a to vrátane Safari (od roku 2015), Firefox (od decembra 2020) a Chrome (od januára 2021).

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

V tomto príklade máme neusporiadaný zoznam s jednou triedou na

  • : 
    

      

    •

    Náš CSS by vybral všetky

  • prvky okrem tých, ktoré majú triedu .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    To isté môžete urobiť aj pomocou pseudotried, ktoré sa považujú za jednoduchý selektor.

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

    Ak však ako argument použijeme selektor pseudo prvkov, neprinesie očakávaný výsledok.

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

    Komplexné selektory

    /* select all

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

    Vizuálny príklad

    Vizuálne znázornenie rozmanitého použitia :not()

    Špecifickosť

    Špecifickosť :not pseudotriedy je špecifickosť jej argumentu. :not() Pseudo-class nepridá na voličov špecifickosti, na rozdiel od iných pseudotried.

    Negácie nemusia byť vnorené, takže :not(:not(… )) to nie je nikdy povolené. Autori by si mali uvedomiť, že keďže pseudoelementy sa nepovažujú za jednoduchý selektor, nie sú platné ako argumenty pre :not(X). Pri používaní selektorov atribútov buďte opatrní, pretože niektoré nie sú podporované ako iné. Spájanie :not selektorov s inými :not selektormi je prípustné.

    Podpora prehliadača

    :not()Trieda pseudo bola aktualizovaná v Level 4 špecifikácii CSS selektory, aby bolo možné zoznam argumentov. Na úrovni 3 selektorov CSS bol schopný prijať iba jeden jednoduchý selektor. Vo výsledku je podpora prehliadača trochu rozdelená medzi koncepty úrovne 3 a 4.

    Jednoduché selektory

    IE Hrana Firefox Chrome Safari Opera
    9+ Všetky Všetky Všetky 12,1+ Všetky
    Android Chrome Android Firefox Prehliadač Android iOS Safari Opera Mobile
    Všetky Všetky Všetky Všetky Všetky

    Zoznamy selektorov

    Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

    Desktop

    Chrome Firefox IE Hrana Safari
    88 84 Nie 88 9

    Mobil / tablet

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

    Viac informácií

    • Modul selektorov CSS úrovne 3
    • Špecifikácia úrovne 4 selektorov CSS