Properti :not()_ di CSS adalah kelas semu negasi dan menerima daftar pemilih sebagai argumen. Itu 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 a sebagai argumen dianggap eksperimental, meskipun dukungannya berkembang pada saat penulisan ini, termasuk Safari (sejak 2015), Firefox (sejak Desember 2020), dan Chrome (sejak Januari 2021)
CodePen Embed Fallback
/* the X argument can be replaced with any simple selectors */ :not(X) { property: value; }Dalam contoh ini kami memiliki unordered list dengan satu kelas di <li>
<ul> <li></li> <li class="different"></li> <li></li> </ul>_CSS kita akan memilih semua <li> elemen kecuali elemen dengan kelas <ul> <li></li> <li class="different"></li> <li></li> </ul>0
/* Style everything but the .different class */ li:not(.different) { font-size: 3em; }Anda juga bisa melakukan hal yang sama menggunakan kelas semu yang dianggap a
p:not(:nth-child(2n+1)) { font-size: 3em; }_Namun, jika kita menggunakan pemilih elemen semu 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; }Pemilih yang kompleks
Ini lebih baru dari :not() pemilih dasar
/* select all <p>s that are not descendants of <article> */ p:not(article *) { }_CodePen Embed Fallback
Ini bisa sedikit membengkokkan pikiran hanya dengan sedikit lebih bersarang. Sebagai contoh
h2:not(:where(article *, section *)) { .. } /* <article> <h2> No match! </h2> </article> <section> <h2> No Match! </h2> </section> <aside> <h2> Match! </h2> </aside> */Contoh visual
Kekhususan
Kekhususan <ul> <li></li> <li class="different"></li> <li></li> </ul>3 pseudo-class adalah kekhususan argumennya. :not() pseudo-class tidak menambah spesifisitas pemilih, tidak seperti pseudo-class lainnya.
Negasi tidak boleh bertingkat sehingga <ul> <li></li> <li class="different"></li> <li></li> </ul>5 tidak pernah diizinkan. Penulis juga harus memperhatikan bahwa karena elemen semu tidak dianggap sebagai , elemen tersebut tidak valid sebagai argumen untuk <ul> <li></li> <li class="different"></li> <li></li> </ul>6. Berhati-hatilah saat menggunakan pemilih atribut karena beberapa tidak didukung secara luas seperti yang lainnya. Menggabungkan <ul> <li></li> <li class="different"></li> <li></li> </ul>3 pemilih dengan <ul> <li></li> <li class="different"></li> <li></li> </ul>3 pemilih lainnya diperbolehkan
Dukungan peramban
Kelas semu :not() telah diperbarui untuk mengizinkan daftar argumen. Di CSS Selectors Level 3, itu hanya mampu menerima satu pemilih sederhana. Akibatnya, dukungan browser sedikit terbagi antara draft Level 3 dan Level 4
pemilih sederhana
IEEdgeFirefoxChromeSafariOpera9+AllAllAll12. 1+AllAndroid ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera MobileAllAllAllAllAllDaftar pemilih
Data dukungan browser ini berasal dari , yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur tersebut pada versi tersebut dan yang lebih baru
Artikel ini akan mendemonstrasikan pendekatan untuk memeriksa apakah sebuah badan memiliki kelas tertentu menggunakan JavaScript
Bagaimana Cara Memeriksa apakah Tubuh memiliki Kelas Khusus Menggunakan JavaScript?
Untuk memeriksa apakah suatu badan memiliki kelas tertentu menggunakan JavaScript, terapkan pendekatan berikut
- properti “classList” dan metode “contains()”.
- metode “getElementsByTagName()” dan “match()”.
- “jQuery”
Mari kita ilustrasikan masing-masing pendekatan satu per satu
Pendekatan 1. Periksa apakah Tubuh memiliki Kelas Khusus dalam JavaScript Menggunakan Properti classList dan Metode berisi ().
Properti "classList" memberikan nama kelas CSS dari suatu elemen. Sedangkan metode “contains()” memberikan nilai true jika sebuah node adalah keturunan. Gabungan metode ini dapat diterapkan untuk mengakses kelas yang terkandung dalam elemen terkait
Sintaksis
simpul. berisi( desnode )
Dalam sintaks di atas
- "desnode" sesuai dengan node keturunan dari node terkait
Contoh
Mari kita ikhtisar contoh yang diberikan di bawah ini
Ini adalah Situs Web Linuxint
< center>
jika ( dokumen. tubuh . DaftarKelas . berisi('berisi')){
konsol. log("Elemen body memiliki kelas");
}
else{
konsol. log("Elemen body tidak memiliki kelas")
Terapkan langkah-langkah di bawah ini, seperti yang diberikan dalam kode di atas
- Firstly, include a “” element having the set attribute “class”.
- Also, add a heading within the particular element().
- Dalam kode JS, terapkan properti "classList" yang digabungkan dengan metode "contains()".
- This will resultantly access to the class of the associated “” element based on the specified class name in the method’s parameter.
- Setelah kondisi terpenuhi, kondisi "jika" akan dijalankan
- Sebaliknya, blok kode pernyataan "else" akan dieksekusi
Keluaran
In the above output, it can be seen that the particular class is included in the “” element.
Pendekatan 2. Periksa apakah Body memiliki Kelas Tertentu dalam JavaScript Menggunakan Metode getElementsByTagName() dan match()
Metode “getElementsByTagName()” memberikan kumpulan semua elemen yang memiliki nama tag tertentu. Metode “match()” cocok dengan nilai yang ditentukan dengan string. Metode-metode ini dapat digunakan untuk mengakses elemen yang diperlukan dengan tag-nya dan memeriksa kelas tertentu
Sintaksis
dokumen. getElementsByTagName( tag )
Dalam sintaks yang disediakan
- "tag" mewakili nama tag elemen
Contoh
Contoh berikut menunjukkan konsep yang dibahas
< center>
mari dapatkan = dokumen. getElementsByTagName("body")[0].namakelas . cocok(/contains/)
jika (dapatkan) {
konsol. log("Elemen body memiliki kelas");
}
else {
konsol. log("Elemen body tidak memiliki kelas")
Dalam cuplikan kode di atas
- Likewise, include a “” element having the specified class.
- Juga, isi gambar dengan dimensi yang ditetapkan di dalam elemen yang disebutkan di langkah sebelumnya
- In the JavaScript lines of code, access the “” element by its tag using the “getElementsByTagName()” method.
- “[0]” menunjukkan bahwa elemen pertama yang terkait dengan tag yang disebutkan pada langkah sebelumnya akan diambil
- The “className” property and the “match()” method will match for the stated class in its parameter against the “” element.
- Pernyataan sebelumnya dalam kondisi "jika" akan dieksekusi setelah semua kondisi di langkah sebelumnya terpenuhi
- Jika tidak, pernyataan terakhir akan ditampilkan
Keluaran
Output di atas menunjukkan bahwa kondisi yang diterapkan untuk kelas tertentu terpenuhi
Pendekatan 3. Periksa apakah Tubuh memiliki Kelas Khusus di JavaScript Menggunakan jQuery
Pendekatan ini dapat diimplementasikan untuk mengakses elemen yang diperlukan secara langsung dan menempatkan kelas tertentu di atasnya dengan bantuan metodenya secara sederhana
Contoh
Mari kita lihat contoh yang diberikan di bawah ini
skrip >
textarea >
< center>
jika ( $ ("tubuh").hasClass("berisi")){
peringatan ("Elemen body memiliki kelas")
}
else{
peringatan ("Elemen body tidak memiliki kelas")
}
script>
Pada baris kode di atas
- Sertakan perpustakaan "jQuery" untuk memanfaatkan fungsinya
- Similarly, include the “” element having the stated class.
- Also, add a “” element within the stated element in the previous step.
- In the JS code, access the “” element. Also, apply the “hasClass()” method to search for the stated class in the fetched element.
- Ini akan mengingatkan pesan sebelumnya setelah kondisi terpenuhi
- Dalam kasus lain, pernyataan terakhir akan ditampilkan
Keluaran
Output di atas menyiratkan bahwa persyaratan yang diinginkan tercapai
Kesimpulan
Properti "classList" dan metode "contains()", metode "getElementsByTagName()" dan "match()", atau "jQuery" dapat digunakan untuk memeriksa apakah suatu badan memiliki kelas tertentu menggunakan JavaScript. Pendekatan ini dapat digunakan untuk mencari kelas tertentu di dalam suatu elemen dengan merujuk ke elemen yang sesuai secara langsung, dengan tagnya, atau menggunakan metode jQuery. Blog ini menjelaskan untuk memeriksa apakah suatu badan memiliki kelas tertentu dalam JavaScript