Pemilih css untuk simpul induk

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

/* Makes the div color: red; */ div:has(p) { color: red; } _2, kita sekarang dapat memilih div elemen yang memiliki p turunan, atau kombinasi penyeleksi normal lainnya. Misalnya, memilih div dengan anak p sekarang terlihat seperti ini

/* Makes the div color: red; */ div:has(p) { color: red; } _

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; } 0

div: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 yang

/* Makes the div color: red; */ div:has(p) { color: red; } 2 saudara kandung div

span:has(+ div) { color: red; }

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

div: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 lainnya

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

div: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 lain

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

LIHAT SEMUA

Kiat Bagus Yang Cara Belajar Apa Q&A Location What kode Q&a Jelaskan Teknologi Sebutkan Kesehatan dan kecantikan Bagaimana Contoh Toplist Apa yang Berapa disebut Fungsi Apa arti Arti kata Berikut ini Review Harus When Makanan lezat Facebook Mengapa Tentang Beda Anak php Dimaksud Permainan Wo Belajar dengan baik python topten Eth Teknik Tips Membandingkan Cryto How to Tujuan Berikut yang Was Why Perbedaan