CSS adalah bahasa yang kuat tetapi ada banyak hal yang tidak dapat dilakukannya selama ini. Namun, sekarang, dengan pengenalan CSS :has() pseudo-class, sekarang akan dapat melakukan sebagian besar tindakan tersebut dengan mudah. Ini adalah salah satu fitur yang paling menarik dan ditunggu-tunggu yang diperkenalkan di CSS
Jadi, mari belajar tentang :has()_ pemilih
Membutuhkan
Menurut aturan CSS, elemen anak ditargetkan berdasarkan elemen induk (dari kanan ke kiri). Dalam contoh berikut, <target>:has<selector>1 adalah elemen yang ditargetkan di dalam elemen <target>:has<selector>2 dan properti CSS <target>:has<selector>3 diterapkan ke <target>:has<selector>1
Sekarang, bagaimana jika kita ingin menargetkan elemen <target>:has<selector>2 yang berisi elemen <target>:has<selector>1?
Cara termudah untuk mendeskripsikan :has() adalah sebagai pemilih induk. Jika kami ingin menargetkan elemen induk berdasarkan konten atau elemen turunan, kami dapat menggunakan :has()
Sintaksis
:has() mewakili elemen jika pemilih dilewatkan sebagai parameter cocok dengan elemen di dalam elemen div:has(button) { background: red }1
Contoh
Mari pertimbangkan contoh yang sama untuk memahami pemilih :has(). Dalam contoh berikut, menggunakan pemilih :has()_, kami menargetkan elemen <target>:has<selector>2 yang memiliki elemen <target>:has<selector>1
div:has(button) { background: red }Di sini, <target>:has<selector>2 adalah elemen yang ditargetkan dan <target>:has<selector>1 adalah pemilih, yang berarti properti CSS div:has(button) { background: red }8 diterapkan ke <target>:has<selector>2 hanya jika mengandung <target>:has<selector>1 elemen
Skenario dunia nyata
Jadi, katakanlah kita memiliki daftar produk dan beberapa produk tersedia dengan penawaran. Misalkan kita ingin menerapkan beberapa gaya ekstra pada produk dengan penawaran
Seperti yang ditunjukkan pada kode di atas, kami memiliki 3 produk dan salah satunya datang dengan penawaran, Sekarang, kami perlu menerapkan beberapa CSS tambahan untuk produk spesifik tersebut. Secara umum, kami menggunakan JQuery atau JavaScript untuk mencapai skenario seperti yang ditunjukkan di bawah ini
<script> const products = document.getElementsByClassName("product"); for (let i = 0; i < products.length; i++) { let isOffer = products[i].getElementsByClassName("offer"); if (isOffer[0]) { products[i].style.border = "2px solid green"; products[i].style.boxShadow = "5px 5px 10px lightgreen"; } } </script>Sangat menyenangkan bahwa kita dapat menghindari penggunaan JavaScript atau JQuery apa pun dan menyederhanakan kode di atas dengan menggunakan pemilih :has()
.product:has(button.offer) { border: 2px solid green; box-shadow: 5px 5px 10px lightgreen; }Di sini, jika pemilih <div class="Container"> <div class="product"> <h1>Product 1</h1> <h3>$130</h3> <button class="buy">Buy</button> </div> <div class="product"> <h1>Product 2</h1> <h3>$130</h3> <button class="buy">Buy</button> </div> <div class="product"> <h1>Product 3</h1> <h3>$100</h3> <button class="offer">Apply offer</button> </div> </div>_2 diteruskan sebagai parameter cocok dengan elemen di dalam <div class="Container"> <div class="product"> <h1>Product 1</h1> <h3>$130</h3> <button class="buy">Buy</button> </div> <div class="product"> <h1>Product 2</h1> <h3>$130</h3> <button class="buy">Buy</button> </div> <div class="product"> <h1>Product 3</h1> <h3>$100</h3> <button class="offer">Apply offer</button> </div> </div>3, barulah CSS di atas diterapkan
Bagaimana cara menerapkan CSS ke elemen induk berdasarkan kelas anak?
elements where the parent is a
Bagaimana Anda mengatur gaya elemen induk saat mengarahkan elemen anak?
element inside the