Analisis lebih lanjut tentang status pemeliharaan selektor simpul-induk berdasarkan irama versi npm yang dirilis, aktivitas repositori, dan poin data lainnya menentukan bahwa pemeliharaannya tidak aktif
Sinyal pemeliharaan proyek yang penting untuk dipertimbangkan bagi pemilih induk-simpul adalah bahwa ia belum melihat versi baru yang dirilis ke npm dalam 12 bulan terakhir, dan dapat dianggap sebagai proyek yang dihentikan, atau proyek yang kurang mendapat perhatian dari pengelolanya
Dalam sebulan terakhir kami tidak menemukan aktivitas permintaan penarikan atau perubahan status masalah yang terdeteksi untuk repositori GitHub
CSS'. has'_ menambahkan logika khusus untuk menemukan elemen berdasarkan pemilih lain (bukan pemilihnya sendiri)
Dengan meningkatnya dukungan, dalam artikel ini saya akan berfokus pada cara kerja pemilihan induk CSS, dan bagaimana Anda dapat melakukannya hari ini jika dukungan tersedia. Sementara itu, jika Anda memerlukan dukungan penuh di semua browser, Anda juga dapat mengimplementasikan polyfill ini hingga dukungan CSS asli tersedia
Bagaimana Pemilih Induk bekerja di CSS
Di CSS, jika kita ingin memilih sesuatu, kita menggunakan pemilih yang menurunkan DOM. Misalnya, memilih tag p dalam tag div terlihat seperti ini
div p { color: red; }Hingga saat ini, kami tidak dapat benar-benar memilih tag div yang memiliki tag p di dalamnya, dan ini berarti kami harus menggunakan Javascript. Alasan utama mengapa ini tidak diterapkan di CSS adalah karena ini adalah operasi yang cukup mahal untuk dilakukan. CSS relatif cepat untuk diurai, tetapi memilih tag induk memerlukan jumlah pemrosesan yang relatif lebih besar
Dengan menggunakan pemilih
Ini akan membuat div dengan anak p merah
Menggabungkan pilihan induk dengan penyeleksi lainnya
Sama seperti pemilih CSS lainnya, kami dapat menggabungkan ini untuk keadaan tertentu. Misalnya, jika Anda hanya ingin memilih div tag yang memiliki turunan langsung
div:has(> span) { color: red; } 0div:has(> span) { color: red; } _Seperti yang ditunjukkan oleh kosakata
/* Makes the div color: red; */ div:has(p) { color: red; } _2, itu tidak hanya terbatas pada pemilihan orang tua. Misalnya, di bawah ini kita dapat memilih div:has(> span) { color: red; } _0 yangAtau bahkan, memilih elemen yang tidak memiliki anak, dengan menggunakan pemilih
div:has(> span) { color: red; } 5. Misalnya, berikut ini akan memilih div yang tidak memiliki p anakdiv:not(:has(p)) { color: red; }Memilih elemen yang hanya berisi teks di CSS
Satu masalah yang sangat umum di CSS adalah bahwa
div:has(> span) { color: red; } _7 tag tidak memilih elemen yang berisi teks apa pun - jadi terkadang elemen dapat berisi satu spasi, dan div:has(> span) { color: red; } 7 tidak akan berlaku. Pemilih /* Makes the div color: red; */ div:has(p) { color: red; } 2 memberi kita kekuatan untuk memilih elemen yang hanya berisi simpul teks, dan tidak ada elemen turunan lainnyaMeskipun ini bukan solusi sempurna untuk hanya
div:has(> span) { color: red; } 7 elemen dengan spasi (karena ini akan memilih elemen apa pun hanya dengan teks dan tanpa elemen DOM HTML tambahan) - ini memberi kita kemampuan untuk memilih elemen DOM hanya dengan simpul teks, yang sebelumnya tidak ada . Kita dapat mencapai ini dengan kode berikutdiv:not(:has(*)) { background: green; }Kesimpulan
Dengan tambahan dukungan pemilih :has()_ di Chrome 105, pemilihan orang tua dengan cepat menjadi kenyataan yang akan segera dapat kami gunakan pada proyek kehidupan nyata. Untuk saat ini, dengan dukungan Safari, mudah untuk menguji dan melihat cara kerjanya di masa mendatang. Ini memiliki manfaat tambahan karena memungkinkan kami mengurangi solusi Javascript untuk pemilihan induk yang cukup umum di banyak aplikasi dan produk
Anda bahkan dapat mulai menggunakan
/* Makes the div color: red; */ div:has(p) { color: red; } _2 hari ini, jika Anda juga menerapkan polyfill ini, lalu menghapus polyfill setelah dukungan asli hadir di Chrome dan browser lainBagaimana cara saya mendapatkan simpul induk di pemilih CSS?
Apakah ada pemilih induk CSS?
Bagaimana cara memilih hanya elemen induk di CSS?
Bagaimana cara menerapkan CSS ke elemen induk berdasarkan CSS anak?
elements where the parent is a