Pemilih h2, .subtitle { margin: 0 0 1.5rem 0; } .header-group:has(h2):has(.subtitle) h2 { margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */ } /* <div class="header-group"> <h2>Blog Post Title</h2> <!-- main spacing applied here --> </div> <div class="header-group"> <h2>Blog Post Title</h2> <div class="subtitle"> <!-- main spacing applied here --> This is a subtitle </div> </div> */3 CSS membantu Anda memilih elemen yang berisi elemen yang cocok dengan pemilih yang Anda teruskan ke fungsi h2, .subtitle { margin: 0 0 1.5rem 0; } .header-group:has(h2):has(.subtitle) h2 { margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */ } /* <div class="header-group"> <h2>Blog Post Title</h2> <!-- main spacing applied here --> </div> <div class="header-group"> <h2>Blog Post Title</h2> <div class="subtitle"> <!-- main spacing applied here --> This is a subtitle </div> </div> */4. Ini pada dasarnya adalah pemilih "induk", meskipun jauh lebih berguna dari itu. Misalnya, bayangkan Anda dapat memilih semua h2, .subtitle { margin: 0 0 1.5rem 0; } .header-group:has(h2):has(.subtitle) h2 { margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */ } /* <div class="header-group"> <h2>Blog Post Title</h2> <!-- main spacing applied here --> </div> <div class="header-group"> <h2>Blog Post Title</h2> <div class="subtitle"> <!-- main spacing applied here --> This is a subtitle </div> </div> */5 tetapi hanya jika mengandung h2, .subtitle { margin: 0 0 1.5rem 0; } .header-group:has(h2):has(.subtitle) h2 { margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */ } /* <div class="header-group"> <h2>Blog Post Title</h2> <!-- main spacing applied here --> </div> <div class="header-group"> <h2>Blog Post Title</h2> <div class="subtitle"> <!-- main spacing applied here --> This is a subtitle </div> </div> */6. Itulah yang bisa kami lakukan
div:has(p) { background: red; } /* <div> <!-- selected! --> <p></p> <div> <div></div> <!-- not selected --> <div> <!-- not selected --> <section></section> </div> */_Meskipun tidak didukung di browser apa pun saat saya menulis, sekarang telah turun di Safari Technical Preview 137, jadi itu mulai terjadi
Sangat berguna, benar. Ini contoh lainnya. Katakanlah Anda ingin ruang setelah header Anda. Tentu saja. Sedikit h2, .subtitle { margin: 0 0 1.5rem 0; } .header-group:has(h2):has(.subtitle) h2 { margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */ } /* <div class="header-group"> <h2>Blog Post Title</h2> <!-- main spacing applied here --> </div> <div class="header-group"> <h2>Blog Post Title</h2> <div class="subtitle"> <!-- main spacing applied here --> This is a subtitle </div> </div> */_7 pada h2, .subtitle { margin: 0 0 1.5rem 0; } .header-group:has(h2):has(.subtitle) h2 { margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */ } /* <div class="header-group"> <h2>Blog Post Title</h2> <!-- main spacing applied here --> </div> <div class="header-group"> <h2>Blog Post Title</h2> <div class="subtitle"> <!-- main spacing applied here --> This is a subtitle </div> </div> */8 Anda harus melakukannya. Tapi… bagaimana jika ada subtitle?
h2, .subtitle { margin: 0 0 1.5rem 0; } .header-group:has(h2):has(.subtitle) h2 { margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */ } /* <div class="header-group"> <h2>Blog Post Title</h2> <!-- main spacing applied here --> </div> <div class="header-group"> <h2>Blog Post Title</h2> <div class="subtitle"> <!-- main spacing applied here --> This is a subtitle </div> </div> */Cara saya memikirkan h2, .subtitle { margin: 0 0 1.5rem 0; } .header-group:has(h2):has(.subtitle) h2 { margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */ } /* <div class="header-group"> <h2>Blog Post Title</h2> <!-- main spacing applied here --> </div> <div class="header-group"> <h2>Blog Post Title</h2> <div class="subtitle"> <!-- main spacing applied here --> This is a subtitle </div> </div> */_3 adalah ini. itu adalah pseudo-class pemilih induk. Itu adalah bahasa CSS untuk “itu memungkinkan Anda mengubah elemen induk jika memiliki anak atau elemen lain yang mengikutinya. Ini mungkin terasa aneh. Ini mungkin merusak model mental Anda tentang cara kerja CSS. Beginilah cara saya berpikir tentang CSS
.parent .child { color: red; }_Anda hanya dapat mengatur gaya ke bawah, dari orang tua ke anak, tetapi tidak pernah memundurkan pohon. h2, .subtitle { margin: 0 0 1.5rem 0; } .header-group:has(h2):has(.subtitle) h2 { margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */ } /* <div class="header-group"> <h2>Blog Post Title</h2> <!-- main spacing applied here --> </div> <div class="header-group"> <h2>Blog Post Title</h2> <div class="subtitle"> <!-- main spacing applied here --> This is a subtitle </div> </div> */3 benar-benar mengubah ini karena sampai sekarang belum ada pemilih induk di CSS dan ada beberapa alasan bagus mengapa. Karena cara browser mengurai HTML dan CSS, memilih induk jika kondisi tertentu terpenuhi dapat menyebabkan segala macam masalah kinerja
Jika saya duduk dan memikirkan semua cara yang mungkin saya gunakan h2, .subtitle { margin: 0 0 1.5rem 0; } .header-group:has(h2):has(.subtitle) h2 { margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */ } /* <div class="header-group"> <h2>Blog Post Title</h2> <!-- main spacing applied here --> </div> <div class="header-group"> <h2>Blog Post Title</h2> <div class="subtitle"> <!-- main spacing applied here --> This is a subtitle </div> </div> */3 hari ini, saya agak pusing. Itu akan membuka kotak peluang pandora ini yang tidak pernah mungkin dilakukan dengan CSS saja
Contoh lain. katakanlah kita hanya ingin menerapkan gaya ke tautan yang memiliki gambar di dalamnya
a:has(> img) { border: 20px solid white; }Ini akan sangat membantu dari waktu ke waktu. Saya juga dapat melihat h2, .subtitle { margin: 0 0 1.5rem 0; } .header-group:has(h2):has(.subtitle) h2 { margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */ } /* <div class="header-group"> <h2>Blog Post Title</h2> <!-- main spacing applied here --> </div> <div class="header-group"> <h2>Blog Post Title</h2> <div class="subtitle"> <!-- main spacing applied here --> This is a subtitle </div> </div> */_3 digunakan untuk menambahkan margin dan padding secara bersyarat ke elemen tergantung pada kontennya. Itu akan rapi
Pemilih h2, .subtitle { margin: 0 0 1.5rem 0; } .header-group:has(h2):has(.subtitle) h2 { margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */ } /* <div class="header-group"> <h2>Blog Post Title</h2> <!-- main spacing applied here --> </div> <div class="header-group"> <h2>Blog Post Title</h2> <div class="subtitle"> <!-- main spacing applied here --> This is a subtitle </div> </div> */3 adalah bagian dari spesifikasi yang sama yang memiliki kelas semu .parent .child { color: red; }4 yang sangat berguna
Anda dapat berargumen bahwa pemilih h2, .subtitle { margin: 0 0 1.5rem 0; } .header-group:has(h2):has(.subtitle) h2 { margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */ } /* <div class="header-group"> <h2>Blog Post Title</h2> <!-- main spacing applied here --> </div> <div class="header-group"> <h2>Blog Post Title</h2> <div class="subtitle"> <!-- main spacing applied here --> This is a subtitle </div> </div> */3 CSS lebih kuat dari sekadar pemilih "induk", yang persis seperti yang telah dilakukan Bramus. Seperti pada contoh subjudul di atas, Anda pada akhirnya tidak harus memilih induk, Anda mungkin memilih induk dalam kondisi-has, tetapi kemudian pada akhirnya memilih elemen turunan dari sana
/* Matches <figure> elements that have a <figcaption> as a child element */ figure:has(figcaption) { … } /* Matches <img> elements that is a child of a <figure> that contains a <figcaption> child element */ figure:has(figcaption) img { … }Di sana Anda dapat dengan cepat melihat bahwa pemilih kedua memilih anak .parent .child { color: red; }6, bukan hanya orang tua dari .parent .child { color: red; }7
Daftar Pemilih
Anda bisa merantainya
Atau berikan daftar pemilih
article:has(h2, ul) { }Dan daftarnya memaafkan. Daftar tersebut tidak lagi “memaafkan” setelah W3C mengadopsi resolusi pada Desember 2020 sebagai tanggapan atas masalah yang dilaporkan. Jadi, jika daftar pemilih berisi bahkan satu argumen yang tidak valid, seluruh daftar akan diabaikan
/* 👎 */ article:has(h2, ul, ::-blahdeath) { /* ::blahdeath is invalid, making the entire selector invalid. */ }Solusinya adalah membuat pemilih yang lebih pemaaf di sana, seperti .parent .child { color: red; }8 atau .parent .child { color: red; }9
/* 👍 */ article:has(:where(h2, ul, ::-blahdeath)) { /* :where is a forgiving selector, making this valid. */ }Pengujian untuk Dukungan
@supports(selector(:has(p))) { /* Supported! */ }Pemilih a:has(> img) { border: 20px solid white; }0 adalah bagian dari spesifikasi yang sama…
Tidak seperti h2, .subtitle { margin: 0 0 1.5rem 0; } .header-group:has(h2):has(.subtitle) h2 { margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */ } /* <div class="header-group"> <h2>Blog Post Title</h2> <!-- main spacing applied here --> </div> <div class="header-group"> <h2>Blog Post Title</h2> <div class="subtitle"> <!-- main spacing applied here --> This is a subtitle </div> </div> */3, a:has(> img) { border: 20px solid white; }2 memang memiliki dukungan browser yang cukup baik dan saya menggunakannya untuk pertama kali tempo hari
h2, .subtitle { margin: 0 0 1.5rem 0; } .header-group:has(h2):has(.subtitle) h2 { margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */ } /* <div class="header-group"> <h2>Blog Post Title</h2> <!-- main spacing applied here --> </div> <div class="header-group"> <h2>Blog Post Title</h2> <div class="subtitle"> <!-- main spacing applied here --> This is a subtitle </div> </div> */0CodePen Embed Fallback
Itu bagus, saya juga suka betapa mudah dibacanya;
Cara lain Anda dapat menggunakan a:has(> img) { border: 20px solid white; }_2 adalah untuk margin
h2, .subtitle { margin: 0 0 1.5rem 0; } .header-group:has(h2):has(.subtitle) h2 { margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */ } /* <div class="header-group"> <h2>Blog Post Title</h2> <!-- main spacing applied here --> </div> <div class="header-group"> <h2>Blog Post Title</h2> <div class="subtitle"> <!-- main spacing applied here --> This is a subtitle </div> </div> */_1Jadi setiap elemen yang bukan item terakhir mendapat margin. Ini berguna jika Anda memiliki banyak elemen di kartu, seperti ini
CodePen Embed Fallback
… dan juga .parent .child { color: red; }8 dan .parent .child { color: red; }9
Pemilih CSS Level 4 juga memiliki spesifikasi yang sama yang memiliki a:has(> img) { border: 20px solid white; }6 pemilih yang dapat digunakan seperti ini hari ini di banyak browser
h2, .subtitle { margin: 0 0 1.5rem 0; } .header-group:has(h2):has(.subtitle) h2 { margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */ } /* <div class="header-group"> <h2>Blog Post Title</h2> <!-- main spacing applied here --> </div> <div class="header-group"> <h2>Blog Post Title</h2> <div class="subtitle"> <!-- main spacing applied here --> This is a subtitle </div> </div> */_2Info lebih lanjut
Jadi begitu. h2, .subtitle { margin: 0 0 1.5rem 0; } .header-group:has(h2):has(.subtitle) h2 { margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */ } /* <div class="header-group"> <h2>Blog Post Title</h2> <!-- main spacing applied here --> </div> <div class="header-group"> <h2>Blog Post Title</h2> <div class="subtitle"> <!-- main spacing applied here --> This is a subtitle </div> </div> */3 seharusnya cukup berguna untuk segera digunakan, dan sepupunya a:has(> img) { border: 20px solid white; }8 dan a:has(> img) { border: 20px solid white; }2 sudah dapat sangat membantu dan itu hanya sekilas — hanya tiga pseudo-class CSS — yang tersedia dalam spesifikasi baru ini