” element, then we can adjust the styling of the parent element by holding the child. For this purpose, we can utilize the “:has()” selector.

Table of Contents Show

• Bagaimana Cara Memilih Semua Elemen Anak?
• Bagaimana Cara Memilih Semua Elemen Anak Langsung?
• Tidak lagi "Hilang dari CSS"
• Apa yang dipilih oleh "Pemilih Induk"?
• Pertimbangan Kinerja
• Implementasi yang mengesampingkan Masalah Kinerja
• Kasus Penggunaan Aktual
• Cara Polifill. has() Selector?
• Ulangan. Bagaimana cara polyfill tanpa menggunakan jQuery?
• querySelectorAllWithHas
• Apa selanjutnya di CSS?
• Bagaimana Anda menerapkan gaya induk di CSS?
• Apa itu elemen induk di CSS?
• Bagaimana cara memilih saudara kandung di CSS?
• Apakah ada pemilih induk SCSS?

From both of the “

” elements, select the one which contains 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>

< p > dunia </p>

< div kelas="anak-div">

< p > saya anak div << /p>

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

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