If it is required to style the “
” element, then we can adjust the styling of the parent element by holding the child. For this purpose, we can utilize the “:has()” selector.
From both of the “
” element using “.class-name:has(child-name)”:
. parent-div. memiliki ( h1 ) {
warna latar belakang. #103e6d;
warna. kerang laut;
lebar. 150 piksel;
tinggi. 150 piksel;
radius batas. 50%;
perataan teks. pusat;
}
Di sini, kami telah menerapkan properti CSS berikut pada elemen induk
- "background-color" digunakan untuk menentukan warna latar belakang elemen
- "warna" menentukan warna teks elemen
- "width" digunakan untuk menentukan lebar elemen
- "tinggi" menentukan ketinggian elemen
- Properti "border-radius" digunakan untuk mengatur sudut membulat dari elemen
- "text-align" menentukan perataan teks
Keluaran
Bagaimana Cara Memilih Semua Elemen Anak?
Untuk memilih elemen anak dengan bantuan pemilih induk, lihat contoh yang diberikan
Contoh
Terapkan langkah-langkah berikut untuk membuat halaman HTML
- Add a div element that contains two “
” tags and a “
” tag having the class “child-div”.- The child “div” element contains a “
” element:
< div kelas="parent-div">
< p > Halo
< p > dunia
< div kelas="anak-div">
< p > saya anak div
< /div >
< /div >We can select child elements through the parent “
” class. This will not only select its direct “p” elements but also selects the nested “p” elements:. parent-div p {
warna latar belakang. #7F167F;
font-family. kursif;
ukuran font. 25px;
perataan teks. pusat;
warna. asap putih;
}Keluaran
Bagaimana Cara Memilih Semua Elemen Anak Langsung?
To select the direct child of the parent div, we can use the “>” symbol. This will help to select all the “p” elements that are the direct child of parent “
”. For instance, we have applied the following CSS properties:. parent-div > p {
warna latar belakang. #7F167F;
font-family. kursif;
ukuran font. 30 piksel;
perataan teks. pusat;
warna. asap putih;
}The "font-family" menentukan font dari elemen yang dipilih dan "font-size" digunakan untuk menentukan ukuran font
Keluaran
Kami telah membahas tentang pemilih induk CSS dalam HTML dan CSS
Kesimpulan
Di CSS, ". has()” digunakan sebagai pseudo-class pemilih induk. Ini terutama digunakan untuk memilih elemen induk. Contohnya, ". parent-div. has(h1)” memilih elemen induk yang memiliki elemen “”. Untuk memilih elemen anak dari elemen induk, gunakan “. induk-div p”. Pernyataan kondisi juga dapat digunakan untuk memilih semua elemen anak langsung. Artikel ini telah menjelaskan pemilih induk CSS dengan contoh
Saya bertanya-tanya mengapa saya harus mengikuti "Tech Twitter" untuk mengetahui kabar baiknya, jadi saya yang menulis postingan singkat di sini di dev. untuk merayakan fitur CSS baru
"Pemilih orang tua", fitur CSS kedua yang paling ditunggu menurut survei State of CSS 2021, juga dikenal sebagai pemilih-memiliki, telah mendapat dukungan browser
Mengutip Sara Soueidan mengutip Jen Simmons di Twitter
has() pada dasarnya adalah pemilih induk yang telah lama ditunggu-tunggu di CSS 🎊
Jangan katakan Safari selalu terakhir. Terkadang kita yang pertama
Namun sebelum merayakan "Safari dulu" kali ini, ketahuilah bahwa Anda mungkin belum memiliki browser untuk menguji pemilih induk di awal tahun 2022. Pembaruan Safari saat ini tidak dikirimkan atau dipasang di sistem operasi Apple yang lebih lama
Tidak lagi "Hilang dari CSS"
Sekarang pemilih induk tidak lagi hilang dari CSS, semoga Firefox dan Chromium segera menyusul
Apa yang dipilih oleh "Pemilih Induk"?
Pemilih induk memilih elemen induk, bukan?
Saya bukan satu-satunya yang memikirkan :has() sebagai "pemilih anak", jadi haruskah saya menyebut mereka "pemilih-pemilih" untuk menghindari kesalahpahaman?
Timothy Huang menyebut :has() "pemilih CSS yang (memilih) orang tua dengan anak yang terdengar seperti deskripsi yang sesuai untuk saya
Dari kaniuse. com/css-has
Misalnya, a:has(>img) memilih semua <a> elemen yang mengandung <img> anak
Kelas semu :has() CSS didokumentasikan dengan baik di MDN
Pertimbangan Kinerja
Alasan utama yang memakan waktu lama untuk diterapkan adalah ketakutan akan perhitungan yang mahal. Pemilih induk mungkin merupakan fitur yang dapat merusak kecepatan dan kinerja situs Anda saat diterapkan ke dokumen secara waktu nyata
Chris Coyier mengutip Jonathan Snook (kembali pada tahun 2010) "bahwa ketika elemen ditambahkan dan dihapus secara dinamis dari halaman, ini dapat menyebabkan seluruh dokumen perlu dirender ulang (masalah penggunaan memori utama)"
Mungkin kita harus ekstra hati-hati untuk mengukur kinerja kita saat kita benar-benar mulai menggunakan penyeleksi induk?
Implementasi yang mengesampingkan Masalah Kinerja
Memperbarui. masalah kinerja mungkin telah dipecahkan. Eric Meyer menyebutkan pembicaraan tentang detail kutu buku tentang bagaimana penerapan menghindari masalah kinerja
Setelah menonton Byungwoo Lee di YouTube, saya akan mengatakan bahwa strategi mesin Blink mirip dengan efisiensi mesin catur yang harus mengetahui cara mengabaikan gerakan yang tidak relevan dengan cepat alih-alih memprediksi setiap kemungkinan hasil dari setiap kemungkinan kombinasi gerakan
Dalam kasus CSS, mesin Blink akan mencegah walk up dan invalidasi pada elemen yang tidak relevan. Untuk mengurangi penghitungan ulang yang tidak relevan setelah menerapkan gaya, mesin dapat menandai jika gaya dipengaruhi oleh perubahan status :has() selama penghitungan ulang
Tapi biarkan Byungwoo Lee menjelaskan detail masalah dan solusi yang menerapkan penyeleksi induk
Penjelasannya mencakup kasus penggunaan yang kompleks seperti
/* override template heading style */ body.is-act-index .cms-element-alignment:has(> h1) { _1
atau
/* override template heading style */ body.is-act-index .cms-element-alignment:has(> h1) { _2
Wow. Saya bahkan tidak tahu itu bisa menjadi CSS yang valid
Jangan berhenti belajar. Tapi tetap jangan tampilkan kode seperti itu kepada saya di ulasan kode. Saya mungkin akan meminta Anda untuk memfaktorkan ulangnya menjadi sesuatu yang lebih mudah dipahami dan dipertahankan untuk otak manusia
Kasus Penggunaan Aktual
Seperti yang saya lihat, banyak orang berjuang untuk membuat contoh bagaimana menggunakan penyeleksi has. Beruntunglah anda
Ini adalah contoh dunia nyata. Saya harus memperbaiki tema Shopware yang sudah diperbaiki sebelumnya, dan itu mendesak dan /* override template heading style */ body.is-act-index .cms-element-alignment:has(> h1) { 3, jadi setidaknya tidak ada kode bersih di bagian peta jalan itu
Saya berharap dapat menggunakan :has() di sini, untuk menurunkan risiko tidak sengaja menargetkan elemen yang salah dalam markup yang dihasilkan CMS. Pemilihnya sangat panjang sehingga Anda harus menggulir untuk melihat semuanya
/* override template heading style */ body.is-act-index .cms-sections .col-12 .cms-element-alignment.align-self-start {
Masuk ke mode layar penuh Keluar dari mode layar penuh
Menggunakan /* override template heading style */ body.is-act-index .cms-element-alignment:has(> h1) { _5 membuat perbaikan setidaknya sedikit lebih jelas
/* override template heading style */ body.is-act-index .cms-element-alignment:has(> h1) {
Masuk ke mode layar penuh Keluar dari mode layar penuh
Kami mungkin ingin menulis kode itu hanya agar mudah dibaca. Tetapi kami harus memastikan dukungan browser
Cara Polifill. has() Selector?
Karena tidak ada cara untuk mengatasi penyeleksi induk dalam sintaks CSS terbaru, mereka tidak dapat ditranspilasikan. Jangan berharap untuk PostCSS atau SASS. Kali ini Anda memerlukan JavaScript untuk mengisi ulang browser lama
"jQuery telah memiliki. memiliki pemilih dalam gudangnya sejak dasarnya selamanya", Eric Ponto menulis pada tahun 2015 sudah menunjukkan polyfill berdasarkan jQuery
Polyfill({ selectors: [":has"] }).doMatched(rules => { rules.each(rule => { // just pass it into jQuery since it supports `:has` $(rule.getSelectors()).css(rule.getDeclaration()) }); }); _
Masuk ke mode layar penuh Keluar dari mode layar penuh
Ulangan. Bagaimana cara polyfill tanpa menggunakan jQuery?
Ikuti kuis dan kirimkan solusi Vanilla JS Anda
// TODO: add a parent selector polyfill without using jQuery
Masuk ke mode layar penuh Keluar dari mode layar penuh
Jika Anda tahu solusinya, Anda juga dapat mempostingnya sebagai jawaban atas pertanyaan StackOverflow jika ada vanilla JS yang setara dengan jQuery. memiliki()
querySelectorAllWithHas
Polyfill-css-has Josh Larson menyediakan /* override template heading style */ body.is-act-index .cms-element-alignment:has(> h1) { 6 (terima kasih kepada @lukeshiru untuk tautannya. )
Tapi kami telah berhasil hidup tanpa pemilih induk begitu lama, mungkin kami tidak ingin khawatir lagi, dan lebih baik beralih ke pemutakhiran berikutnya yang akan datang ke bahasa CSS
Apa selanjutnya di CSS?
Apa yang diharapkan dari CSS pada tahun 2022?
Ada fitur yang lebih berguna dalam pipeline, seperti Kueri Wadah CSS yang sudah dapat kita gunakan di Chrome dan Edge dengan mengaktifkannya menggunakan flag fitur
Artikel ini adalah bagian dari seri kecil tentang fitur CSS baru (dan diremehkan) yang dapat Anda mulai pelajari dan gunakan di tahun 2022. Jika Anda mencari ikhtisar komprehensif tentang apa yang baru di CSS pada tahun 2022, lihat ulasan @this-is-learning tentang laporan status CSS 2022 dan temukan beberapa sumber daya yang lebih berguna di bookmark dev 2021/2022 saya /
Bagaimana Anda menerapkan gaya induk di CSS?
Menerapkan gaya ke elemen turunan itu mudah, tetapi jika Anda ingin menerapkan gaya ke kelas induk yang sudah memiliki elemen turunan, Anda dapat menggunakan kombinator anak pemilih CSS ( . Misalnya, div > p memilih semua elemen . For example, div > p selects allelements where the parent is a
element.Apa itu elemen induk di CSS?
Induk adalah elemen yang berada tepat di atas dan terhubung ke elemen di pohon dokumen .Bagaimana cara memilih saudara kandung di CSS?
Pemilih Saudara Berdekatan (+) . Elemen saudara harus memiliki elemen induk yang sama, dan "berdekatan" berarti "segera mengikuti".Apakah ada pemilih induk SCSS?
Pemilih induk, & , adalah pemilih khusus yang ditemukan oleh Sass yang digunakan dalam penyeleksi bersarang untuk merujuk ke pemilih luar . Itu memungkinkan untuk menggunakan kembali pemilih luar dengan cara yang lebih kompleks, seperti menambahkan kelas semu atau menambahkan pemilih sebelum induk.LIHAT SEMUA
- The child “div” element contains a “