: not () adalah pemilih pseudo-class negasi CSS. Ini adalah pemilih kelas pseudo fungsional yang mengambil pemilih sederhana sebagai argumen, dan kemudian mencocokkan satu atau lebih elemen yang tidak diwakili oleh argumen.
Pemilih sederhana yang: tidak () mengambil sebagai argumen dapat menjadi salah satu dari yang berikut:
- Ketik pemilih (misalnya, p, span, dll.)
- Pemilih kelas (misalnya, .element, .sidebar, dll.)
- ID selector (misalnya, #Header)
- Selektor kelas pseudo (misalnya, : first-child, :last-of-type)
- Pemilih Atribut (misalnya, [type = “checkbox”])
- Pemilih universal (*)
Argumen yang diteruskan ke: not () tidak bisa, bagaimanapun, menjadi pemilih elemen-pseudo (seperti :: before dan :: after, antara lain) atau negation pseudo-class selector lain.
Jadi, berikut ini tidak valid: not() nilai:
/* INVALID */
p:not(:not(.same)) {}
p:not(:not(:last-child)) {}
:not(::first-letter) {}
a:not(::after) {}
Jadi: not () tidak dapat diulang (: not (: not (..))), dan itu juga tidak dapat disarangkan di dalam: match () pseudo-class selector (: matches (: not (..))).
Seperti yang disebutkan sebelumnya,: tidak () pemilih cocok dengan elemen yang tidak diwakili oleh pemilih dalam argumennya. Jadi, aturan ini:
li:not(.new) {
}
akan memilih semua item daftar kecuali yang memiliki nama kelas .new.
The: tidak () pemilih adalah rantai dengan lebih: tidak () pemilih. Sebagai contoh, berikut ini akan cocok dengan semua artikel kecuali yang dengan ID #featured, dan kemudian akan menyaring artikel dengan nama kelas .tutorial:
article:not(#featured):not(.tutorial) {
}
Pada Spesifitas pemilih
Kekhususan dari: tidak () kelas pseudo adalah kekhususan argumennya. The: not () pseudo-class tidak menambah kekhususan pemilih, tidak seperti pseudo-class lainnya.
Contoh:
Berikut ini semua contoh valid dalam deklarasi :not () :
:not(a) {
}
p:not(:first-of-type) {
}
a:not([href = "https://www.kursuswebsite.org/"]) {
}
input[type="text"]:not([disabled="disabled"]) {
}
h1:not(#page-title) {
}