: ne () - CSS-trikovi

Anonim

:not()Nekretnina u CSS je negacija pseudo klasa i prihvaća jednostavan izbornik ili popis selektor kao argument. Podudara se s elementom koji nije predstavljen argumentom. Proslijeđeni argument ne smije sadržavati dodatne selektore ili bilo koje selektore pseudo-elemenata.

Sposobnost upotrebe popisa selektora kao argumenta smatra se eksperimentalnom, iako podržana raste u vrijeme pisanja ovog teksta, uključujući Safari (od 2015.), Firefox (od prosinca 2020.) i Chrome (od siječnja 2021.).

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

U ovom primjeru imamo nesređeni popis s jednom klasom na

  • : 
    

      

    •

    Naš CSS bi odabrao sve

  • elementi osim onog (a) s klasom od .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    Isto biste mogli učiniti i pomoću pseudo klasa koje se smatraju jednostavnim selektorom.

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

    Međutim, ako kao argument koristimo selektor pseudo elemenata, to neće dati očekivani rezultat.

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

    Složeni selektori

    /* select all

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

    Vizualni primjer

    Vizualni prikaz različitih namjena :not()

    Specifičnost

    Specifičnost :not pseudo-klase je specifičnost njezinog argumenta. :not() Pseudo-klase ne dodati na specifičnosti selektor, za razliku od drugih pseudo-klase.

    Negacije se možda neće ugnijezditi, pa :not(:not(… )) nikada nisu dopuštene. Autori bi također trebali napomenuti da, budući da se pseudo-elementi ne smatraju jednostavnim selektorom, oni nisu valjani kao argument :not(X). Budite pažljivi kada koristite selektore atributa jer neki nisu široko podržani kao drugi. Dopušteno je povezivanje :not selektora s drugim :notselektorima.

    Podrška preglednika

    :not()Pseudo klasa je ažuriran u CSS selektora Razina 4 specifikaciji kako bi se omogućilo popis argumenata. U CSS Selectors Level 3 bio je sposoban prihvatiti samo jedan jednostavan selektor. Kao rezultat toga, podrška za preglednik malo je podijeljena između skica razine 3 i razine 4.

    Jednostavni selektori

    IE Rub Firefox Krom Safari Opera
    9+ svi svi svi 12,1+ svi
    Android Chrome Android Firefox Android preglednik iOS Safari Opera Mobile
    svi svi svi svi svi

    Popisi selektora

    Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

    Radna površina

    Krom Firefox IE Rub Safari
    88 84 Ne 88 9

    Mobitel / tablet

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

    Više informacija

    • Modul CSS selektora 3. Nivo
    • Specifikacija CSS selektora razine 4