: ei () - CSS-temppuja

Anonim

:not()Omaisuus CSS on negaatio pseudo luokan ja hyväksyy yksinkertainen valitsin tai valitsinlistaan argumenttina. Se vastaa elementtiä, jota argumentti ei edusta. Hyväksytty argumentti ei saa sisältää muita valitsimia tai pseudoelementin valitsimia.

Kykyä käyttää valintaluetteloa argumenttina pidetään kokeellisena, vaikka sen tuki kasvaa kirjoituksen aikana, mukaan lukien Safari (vuodesta 2015), Firefox (joulusta 2020) ja Chrome (tammikuusta 2021).

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

Tässä esimerkissä meillä on järjestämätön luettelo, jossa on yksi luokka

  • : 
    

      

    •

    CSS-palvelumme valitsisi kaikki

  • elementtejä lukuun ottamatta niitä, joiden luokka on .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    Voit myös tehdä saman käyttämällä näennäisluokkia, joita pidetään yksinkertaisena valitsimena.

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

    Kuitenkin, jos käytämme argumenttina pseudoelementin valitsinta, se ei tuota odotettua tulosta.

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

    Monimutkaiset valitsimet

    /* select all

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

    Visuaalinen esimerkki

    Visuaalinen esitys :not()

    Tarkkuus

    Spesifisyys :not pseudo-luokka on erityispiirteet sen väitettä. :not() Näennäisluokka ei lisätä valitsin yksilöidysti, toisin kuin muut näennäisluokkia.

    Neuvotteluja ei saa sisäkkäin, joten se :not(:not(… )) ei ole koskaan sallittua. Kirjoittajien tulisi myös huomata, että koska pseudoelementtejä ei pidetä yksinkertaisina valitsimina, ne eivät ole kelvollisia argumenttina :not(X). Ole tarkkaavainen käyttäessäsi attribuuttien valitsimia, koska joitain ei tueta laajalti kuin toisia. :not Valitsinten ketjutus muiden :not valitsimien kanssa on sallittua.

    Selaimen tuki

    :not()Pseudo luokka on päivitetty CSS valitsimet Taso 4 toiveiden yksiselitteinen luettelosta. CSS-valitsimien tasolla 3 se pystyi hyväksymään vain yhden yksinkertaisen valitsimen. Tämän seurauksena selaintuki on hieman jaettu tason 3 ja 4 luonnosten kesken.

    Yksinkertaiset valitsimet

    IE Reuna Firefox Kromi Safari Ooppera
    9+ Kaikki Kaikki Kaikki 12.1+ Kaikki
    Android Chrome Android Firefox Android-selain iOS Safari Opera Mobile
    Kaikki Kaikki Kaikki Kaikki Kaikki

    Valintaluettelot

    Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.

    Työpöytä

    Kromi Firefox IE Reuna Safari
    88 84 Ei 88 9

    Matkapuhelin / tabletti

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

    Lisää tietoa

    • CSS-valitsinten moduuli, taso 3
    • CSS-valitsimien tason 4 määrittely