: nu () - CSS-Tricks

Anonim

:not()Proprietatea în CSS este o clasă de pseudo negație și acceptă un selector simplu sau o listă de selectare ca argument. Se potrivește cu un element care nu este reprezentat de argument. Argumentul trecut nu poate conține selectori suplimentari sau niciun selector de pseudo-element.

Abilitatea de a utiliza o listă de selectori ca argument este considerată experimentală, deși suportul său este în creștere la momentul redactării acestui articol, inclusiv Safari (din 2015), Firefox (din decembrie 2020) și Chrome (din ianuarie 2021).

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

În acest exemplu avem o listă neordonată cu o singură clasă pe

  • : 
    

      

    •

    CSS-ul nostru ar selecta toate

  • elemente cu excepția unuia (lor) cu o clasă de .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    Puteți face același lucru folosind pseudo-clase care sunt considerate un simplu selector.

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

    Cu toate acestea, dacă folosim un pseudoselector ca argument, acesta nu va produce rezultatul scontat.

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

    Selectoare complexe

    /* select all

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

    Exemplu vizual

    Reprezentarea vizuală a diferitelor utilizări ale :not()

    Specificitate

    Specificitatea :not pseudo-clasei este specificitatea argumentului său. :not() Pseudo-clasă nu adaugă la specificitatea selectorului, spre deosebire de alte pseudo-clase.

    Negările nu pot fi cuibărite, deci :not(:not(… )) nu este permisă niciodată. Autorii ar trebui, de asemenea, să rețină că, deoarece pseudo-elementele nu sunt considerate un simplu selector, ele nu sunt valabile ca argument pentru :not(X). Fiți atenți când utilizați selectoare de atribute, deoarece unele nu sunt acceptate pe scară largă ca altele. Înlănțuirea :not selectoarelor cu alte :not selectoare este permisă.

    Suport pentru browser

    :not()Clasa pseudo a fost actualizat în CSS Căutători Level 4 caietul de sarcini , pentru a permite o lista de argumente. În nivelul 3 al selectorilor CSS, era capabil să accepte un singur selector simplu. Ca urmare, suportul pentru browser este puțin împărțit între schițele de nivel 3 și nivel 4.

    Selectoare simple

    IE Margine Firefox Crom Safari Operă
    9+ Toate Toate Toate 12.1+ Toate
    Android Chrome Android Firefox Browser Android Safari iOS Opera Mobile
    Toate Toate Toate Toate Toate

    Liste de selecție

    Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.

    Desktop

    Crom Firefox IE Margine Safari
    88 84 Nu 88 9

    Mobil / Tabletă

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

    Mai multe informatii

    • Selector CSS Modul Nivelul 3
    • Selecție CSS specificație de nivel 4