:not() :is() dan :where()
Kecualikan elemen dengan :not(), cocokkan salah satu item dalam daftar dengan :is(), dan gunakan :where() untuk spesifisitas rendah.
:not() :is() dan :where() adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Kelas Semu :not()
:not(selector) memilih elemen yang tidak cocok dengan pemilih yang diberikan. Kelas semu ini membalikkan pemilihan.
<input type="text" placeholder="Text input (styled)" />
<input type="submit" value="Submit (unstyled)" />
:not() dengan Beberapa Argumen
CSS modern memungkinkan beberapa argumen di dalam :not() — kelas semu ini mencocokkan elemen yang tidak cocok dengan satu pun pemilih yang tercantum:
<a href="#">Normal link</a> <a href="#" class="active">Active link</a> <a href="#" class="disabled">Disabled link</a>
Spesifisitas :not()
Spesifisitas :not() sama dengan spesifisitas argumennya yang paling spesifik. :not(.active) memiliki spesifisitas tingkat kelas (0,1,0).
Kelas Semu :is()
:is() mencocokkan elemen apa pun yang cocok dengan salah satu pemilih dalam suatu daftar. Kelas semu ini menyederhanakan pengelompokan dan mengurangi pengulangan.
<header><h1>Site Title</h1><h2>Subtitle</h2><h3>Tagline</h3></header>
Spesifisitas :is()
:is() menggunakan spesifisitas argumennya yang paling spesifik. Jika daftar tersebut berisi pemilih ID, seluruh aturan memiliki spesifisitas ID.
<div id="header"><h2>Header H2 (crimson via ID)</h2></div>
<div class="card"><h2>Card H2 (crimson via class)</h2></div>
Penguraian Toleran :is()
:is() menggunakan penguraian pemilih yang toleran: jika ada pemilih dalam daftar yang tidak valid, pemilih tersebut diabaikan tanpa pesan dan pemilih lainnya tetap diterapkan. Pemilih biasa yang dipisahkan dengan koma gagal seluruhnya jika salah satunya tidak valid.
Kelas Semu :where()
:where() bekerja persis seperti :is(), tetapi memiliki spesifisitas nol. Kelas semu ini dirancang untuk kelas utilitas dan gaya reset yang seharusnya mudah ditimpa.
<h1>No top margin</h1><h2>No top margin</h2><h3>No top margin</h3>
:where() untuk Reset
:where() ideal untuk reset CSS dan gaya dasar yang seharusnya tidak pernah unggul dalam persaingan spesifisitas:
<ul><li>Item A</li><li>Item B</li></ul>
<ol><li>Step 1</li><li>Step 2</li></ol>
Membandingkan Spesifisitas
Ringkasan perilaku spesifisitas:
:is()— spesifisitas tertinggi di antara argumen:where()— selalu memiliki spesifisitas nol:not()— spesifisitas tertinggi di antara argumen
Merangkai :is() dan :not()
Gabungkan keduanya untuk membuat pemilih yang tepat dan mudah dibaca:
<nav class="nav"><a href="#">Link</a> <button>Button</button> <a href="#" class="disabled">Disabled Link</a></nav>
Dukungan Peramban
:is() dan :where() didukung oleh semua peramban modern. :not() dengan beberapa argumen didukung oleh peramban modern. Hindari penggunaannya dalam proyek yang memerlukan dukungan IE11.
Cek Cepat
Kelas semu mana yang memiliki spesifisitas nol, apa pun argumennya?
Ringkasan
:not() membalikkan pemilihan dan menerima beberapa argumen. :is() mencocokkan salah satu pemilih dalam daftar dengan spesifisitas tertinggi di daftar tersebut. :where() melakukan hal yang sama, tetapi dengan spesifisitas nol — sempurna untuk reset. Ketiganya menggunakan penguraian toleran dan mengabaikan pemilih yang tidak valid tanpa pesan.
Belajar CSS dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Pertanyaan yang Sering Diajukan
Apakah pelajaran “:not() :is() dan :where()” gratis?
Ya — teks lengkap “:not() :is() dan :where()” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “:not() :is() dan :where()”?
Kecualikan elemen dengan :not(), cocokkan salah satu item dalam daftar dengan :is(), dan gunakan :where() untuk spesifisitas rendah. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “:not() :is() dan :where()” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- :hover :focus :active dan :visited
- :nth-child dan :nth-of-type
- :not() :is() dan :where()
- :checked :disabled dan Pseudo Form State