: tidak () - Trik CSS

Anonim

The :not()properti di CSS adalah kelas semu negasi dan menerima pemilih sederhana atau daftar pemilih sebagai argumen. Ini cocok dengan elemen yang tidak diwakili oleh argumen. Argumen yang diteruskan tidak boleh berisi pemilih tambahan atau pemilih elemen semu apa pun.

Kemampuan untuk menggunakan daftar pemilih sebagai argumen dianggap eksperimental, meskipun dukungannya terus berkembang pada saat penulisan ini, termasuk Safari (sejak 2015), Firefox (sejak Desember 2020), dan Chrome (sejak Januari 2021).

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

Dalam contoh ini kami memiliki daftar tak berurutan dengan satu kelas di

  • : 
    

      

    •

    CSS kami akan memilih semua

  • elemen kecuali satu dengan kelas .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    Anda juga dapat melakukan hal yang sama menggunakan kelas semu yang dianggap sebagai pemilih sederhana.

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

    Namun jika kita menggunakan pemilih elemen pseudo sebagai argumen kita, itu tidak akan menghasilkan hasil yang diharapkan.

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

    Penyeleksi Kompleks

    /* select all

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

    Contoh Visual

    Representasi visual dari beragam penggunaan :not()

    Kekhususan

    Kekhususan :not pseudo-class adalah kekhususan argumennya. The :not() pseudo-class tidak menambah kekhususan pemilih, tidak seperti pseudo-kelas lain.

    Negasi tidak boleh disarangkan jadi :not(:not(… )) tidak pernah diizinkan. Penulis juga harus mencatat bahwa karena elemen semu tidak dianggap sebagai pemilih sederhana, mereka tidak valid sebagai argumen untuk :not(X). Berhati-hatilah saat menggunakan pemilih atribut karena beberapa tidak didukung secara luas seperti yang lain. :not Seleksi berantai dengan penyeleksi lain :not diperbolehkan.

    Dukungan browser

    Kelas :not()pseudo telah diperbarui dalam spesifikasi CSS Selectors Level 4 untuk memungkinkan daftar argumen. Di CSS Selectors Level 3, itu hanya mampu menerima satu pemilih sederhana. Akibatnya, dukungan browser sedikit terbagi antara draf Level 3 dan Level 4.

    Selektor sederhana

    YAITU Tepi Firefox Chrome Safari Opera
    9+ Semua Semua Semua 12.1+ Semua
    Android Chrome Android Firefox Browser Android iOS Safari Opera Mobile
    Semua Semua Semua Semua Semua

    Daftar pemilih

    Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

    Desktop

    Chrome Firefox YAITU Tepi Safari
    88 84 Tidak 88 9

    Ponsel / Tablet

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

    Informasi lebih lanjut

    • Modul Pemilih CSS Level 3
    • Spesifikasi CSS Selectors Level 4