: değil () - CSS Hileleri

Anonim

:not()CSS'deki tesiste olumsuzluk sözde sınıftır ve basit bir seçici veya bağımsız değişken olarak bir seçici listesi kabul eder. Bağımsız değişken tarafından temsil edilmeyen bir öğeyle eşleşir. Aktarılan bağımsız değişken, ek seçiciler veya herhangi bir sözde öğe seçicisi içeremez.

Safari (2015'ten beri), Firefox (Aralık 2020'den beri) ve Chrome (Ocak 2021'den beri) dahil olmak üzere bu yazının yazıldığı sırada destekleniyor olsa da, bir seçiciler listesini argüman olarak kullanma yeteneği deneysel olarak kabul edilir.

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

Bu örnekte, üzerinde tek bir sınıf bulunan sırasız bir listemiz var.

  • : 
    

      

    •

    CSS'miz tüm

  • sınıfına sahip olanlar hariç elemanlar .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    Aynı şeyi basit bir seçici olarak kabul edilen sözde sınıfları kullanarak da yapabilirsiniz.

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

    Bununla birlikte, argümanımız olarak bir sözde eleman seçici kullanırsak, beklenen sonucu vermeyecektir.

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

    Karmaşık Seçiciler

    /* select all

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

    Görsel Örnek

    Çeşitli kullanımlarının görsel temsili :not()

    Özgüllük

    Özgüllüğü :not sözde sınıfı bağımsız değişken spesifikliği. :not() Sözde sınıf diğer sözde sınıfları farklı olarak, selektör özgüllük eklemez.

    Olumsuzluklar yuvalanamaz, bu :not(:not(… )) nedenle asla izin verilmez. Yazarlar, sözde elemanların basit bir seçici olarak kabul edilmediğinden, bir argüman olarak geçerli olmadıklarını da unutmamalıdırlar :not(X). Bazıları diğerleri kadar geniş çapta desteklenmediğinden öznitelik seçicilerini kullanırken dikkatli olun. :not Seçicilerin diğer :not seçicilerle zincirlenmesine izin verilir.

    Tarayıcı desteği

    :not()Sözde sınıf bir argüman izin verilenler listesi CSS Seçiciler Seviye 4 şartnamede güncellendi. CSS Seçiciler Düzey 3'te, yalnızca tek bir basit seçiciyi kabul edebiliyordu. Sonuç olarak, tarayıcı desteği Seviye 3 ve Seviye 4 taslakları arasında biraz bölünmüştür.

    Basit seçiciler

    IE Kenar Firefox Krom Safari Opera
    9+ Herşey Herşey Herşey 12.1+ Herşey
    Android Chrome Android Firefox Android Tarayıcı iOS Safari Opera Mobile
    Herşey Herşey Herşey Herşey Herşey

    Seçici listeleri

    Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.

    Masaüstü Bilgisayar

    Krom Firefox IE Kenar Safari
    88 84 Hayır 88 9

    Mobil / Tablet

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

    Daha fazla bilgi

    • CSS Seçiciler Modül Seviye 3
    • CSS Seçiciler Seviye 4 spesifikasyonu