CSS :has() Pseudo-Class: Pemilih Berkuasa untuk Penggayaan Dinamik

CSS terus berkembang untuk membolehkan pembangun membina halaman web yang dinamik, intuitif dan menarik secara visual dengan mudah. Satu peningkatan tersebut ialah :has() pseudo-class, yang diperkenalkan dalam CSS moden. Kelas pseudo ini membawa keupayaan pemilihan sedar ibu bapa, membolehkan anda menggunakan gaya secara bersyarat berdasarkan kehadiran atau keadaan elemen kanak-kanak atau adik-beradik.

Artikel ini menerangkan kelas pseudo :has() dengan contoh untuk menunjukkan fleksibiliti dan kuasanya.

Apakah itu :has() Pseudo-Class?

Kelas pseudo :has() sering dirujuk sebagai "pemilih ibu bapa" kerana ia membolehkan anda menggayakan elemen berdasarkan anak, adik beradik atau keturunannya.

selector:has(selectorList)

• pemilih ialah elemen utama yang digunakan oleh peraturan.
• selectorList ialah syarat, yang boleh termasuk kanak-kanak, adik beradik atau elemen lain yang berkaitan dengan elemen utama.

Ciri Utama

• Kesedaran ibu bapa: Gaya digunakan pada elemen berdasarkan keturunan atau adik-beradiknya.
• Keadaan fleksibel: Berfungsi dengan penggabung seperti , ~ dan > untuk perhubungan adik beradik dan anak.
• Interativiti yang dipertingkatkan: Berguna untuk mencipta reka letak atau kesan dinamik tanpa bergantung pada JavaScript.

Contoh Praktikal: Menggunakan :has() untuk Menggayakan Kotak Berdasarkan Adik Beradiknya

body {
  font-family: sans-serif;
}

.box {
  width: 50px;
  height: 40px;
  background-color: red;
  margin: 5px;
}

.border {
  border: 2px solid black;
}

.circle {
  width: 40px;
  height: 40px;
  background-color: blue;
  border-radius: 25px;
}

/* Highlighting boxes that are followed by a circle */
.box:has(+ .circle) {
  width: 80px;
  height: 80px;
}

  
    <title>CSS :has() Example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css">
  
  
    <div>



<p><strong>Explanation</strong></p>

<p><em>Basic Styles</em><br>
        The .box class defines small red rectangles with a margin.<br>
        The .circle class creates blue circular elements.</p>

<p>Dynamic Sizing Using :has():<br>
        The rule .box:has(+ .circle) applies styles to any .box element that is immediately followed by a .circle.<br>
        This rule changes the dimensions of such .box elements to 80px by 80px, making them stand out.</p>

<p><em>Visual Output</em></p>

<p>Initially, the boxes are uniform in size.<br>
The .box element immediately preceding a .circle grows larger due to the :has() rule.</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173495132393104.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="CSS :has() Pseudo-Class: A Powerful Selector for Dynamic Styling"></p>
<h2>
  
  
  Use Cases for :has()
</h2>

<p>The :has() pseudo-class is versatile and can be applied in numerous scenarios:</p>
<h3>
  
  
  1. <strong>Interactive Layouts</strong>
</h3>

<p>Style a parent element based on the presence of a specific child or sibling element, e.g., highlighting a card if it contains a button.<br>
</p>

<pre class="brush:php;toolbar:false">.card:has(button) {
  border: 2px solid green;
}

2. Menu Navigasi Dinamik

Gunakan gaya pada ibu bapa

jika ia mengandungi menu lungsur turun.

li:has(ul) {
  font-weight: bold;
}

3. Pengesahan Borang

Serlahkan medan input tidak sah berdasarkan unsur adik beradik atau ibu bapa.

.form-group:has(input:invalid) {
  border-color: red;
}

4. Hubungan Adik Beradik Tersuai

Gayakan elemen berdasarkan adik beradiknya yang bersebelahan.

h1:has(+ p) {
  margin-bottom: 10px;
}

Kelebihan :has()

1. Meningkatkan Kebolehbacaan:

   • Mengurangkan keperluan JavaScript kompleks untuk mengesan dan memanipulasi DOM.

2. Meningkatkan Prestasi:

   • Ringan dan cekap berbanding dengan penyelesaian JavaScript untuk kesan yang serupa.

3. Memudahkan CSS:

   • Mendayakan penggayaan deklaratif untuk perhubungan yang kompleks, meminimumkan kelas atau atribut tambahan.

---

Sokongan Pelayar

Setakat ini, kelas pseudo :has() disokong oleh kebanyakan penyemak imbas moden, termasuk:

• Chrome: 105
• Tepi: 105
• Safari: 15.4
• Firefox: Sokongan sedang dipertimbangkan.

Untuk penyemak imbas lama, anda mungkin memerlukan sandaran atau polyfill.

---

Kesimpulan

Kelas pseudo :has() ialah penukar permainan dalam CSS moden, membawa keupayaan pemilih induk yang telah lama ditunggu-tunggu. Dengan keupayaannya untuk menggayakan elemen secara bersyarat berdasarkan perhubungannya, ia memudahkan kod CSS, meningkatkan penggayaan dinamik dan mengurangkan pergantungan pada JavaScript untuk manipulasi DOM.

Teroka kelas pseudo :has() dalam projek anda dan buka kunci kemungkinan baharu untuk reka bentuk web yang kreatif dan cekap!