Induk gaya css berdasarkan kelas anak

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>

<target>:has<selector>

<target>:has<selector>

<target>:has<selector>

  div button {
    background: red;
  }

Sekarang, bagaimana jika kita ingin menargetkan elemen

<target>:has<selector>

<target>:has<selector>

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
  }

<target>:has<selector>

Contoh

Mari pertimbangkan contoh yang sama untuk memahami pemilih :has(). Dalam contoh berikut, menggunakan pemilih :has()_, kami menargetkan elemen

<target>:has<selector>

<target>:has<selector>

  div:has(button) {
    background: red
  }

Di sini,

<target>:has<selector>

<target>:has<selector>

  div:has(button) {
    background: red
  }

<target>:has<selector>

<target>:has<selector>

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

<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>

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>

<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>

Bagaimana cara menerapkan CSS ke elemen induk berdasarkan kelas anak?