: nem () - CSS-trükkök

Anonim

A :not()CSS tulajdonság egy tagadás pseudo osztálya, és egyszerű szelektorot vagy szelektorlistát fogad el argumentumként. Megfelel egy olyan elemnek, amelyet nem képvisel az argumentum. Az átadott argumentum nem tartalmazhat további szelektorokat vagy álelem-szelektorokat.

A szelektorok listájának argumentumként való felhasználásának lehetősége kísérleti jellegűnek tekinthető, bár a támogatás az írás idején növekszik, ideértve a Safarit (2015 óta), a Firefoxot (2020 decemberétől) és a Chrome-ot (2021 januárjától).

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

Ebben a példában van egy rendezetlen lista, amelynek egyetlen osztálya van a

  • : 
    

      

    •

    A CSS az összeset kiválasztja

  • elemek, kivéve az egy (ek) egy osztálya .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    Ugyanezt megteheti pszeudo osztályokkal is, amelyek egyszerű választónak számítanak.

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

    Ha azonban argumentumként álelem-választót használunk, akkor az nem eredményezi a várt eredményt.

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

    Komplex választók

    /* select all

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

    Vizuális példa

    A .változatos felhasználásának vizuális ábrázolása :not()

    Sajátosság

    Az :not álosztály sajátossága az érvelésének sajátossága. Az :not() ál-osztály nem egészíti ki a választó specifikusságát, ellentétben más ál-osztályokkal.

    A tárgyalások nem fészkelhetők be, ezért :not(:not(… )) soha nem engedélyezettek. A szerzőknek azt is meg kell jegyezniük, hogy mivel az ál-elemeket nem tekintik egyszerű választónak, ezért nem érvényesek érvelésként :not(X). Legyen körültekintő az attribútumválasztók használatakor, mivel egyeseket nem támogat széles körben, mint másokat. A :not szelektorok láncolása más :not szelektorokkal megengedett.

    Böngésző támogatás

    Az :not()álosztály frissült a CSS Selectors 4. szintű specifikációjában, hogy lehetővé tegye az argumentumlistát. A CSS Selektorok 3. szintjén csak egyetlen egyszerű választót tudott elfogadni. Ennek eredményeként a böngésző támogatása kissé meg van osztva a 3. és 4. szintű vázlatok között.

    Egyszerű választók

    AZAZ Él Firefox Króm Szafari Opera
    9+ Összes Összes Összes 12.1+ Összes
    Android Chrome Android Firefox Android böngésző iOS Safari Opera Mobile
    Összes Összes Összes Összes Összes

    Kiválasztó listák

    Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.

    Asztal

    Króm Firefox AZAZ Él Szafari
    88 84. Nem 88 9.

    Mobil / Tablet

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

    Több információ

    • CSS-választók modul, 3. szint
    • CSS Selectors 4. szintű specifikáció