:has() bisa menata elemen induk berdasarkan isinya, satu saudara berdasarkan saudaranya, dan formulir berdasarkan status validasinya sendiri. Menurut caniuse, 95,91 persen browser mendukungnya hari ini, lebih banyak daripada beberapa CSS yang Anda pelajari bertahun-tahun lalu. Berikut tujuh resep yang dulu butuh JavaScript.
1. Sorot kartu yang berisi input tidak valid
.card:has(input:user-invalid) {
outline: 2px solid var(--tomato);
}2. Gaya setiap baris kotak centang secara konsisten dari kotak centang itu sendiri:
li:has(> input:checked) {
text-decoration: line-through;
}3. Header yang menyisakan ruang untuk sidebar, hanya jika sidebar ada:
body:has(.sidebar) .header {
padding-left: 18rem;
}4. Gambar tanpa keterangan tidak mendapatkan drop shadow. Sepupu mereka menyimpannya:
figure:not(:has(figcaption)) img { box-shadow: none; }5. Kolom kisi yang menyesuaikan dengan apa yang dimasukkan ke dalam daftar. Sangat keren untuk konten CMS:
.grid:has(> :nth-child(3)) { grid-template-columns: repeat(3, 1fr); }6. Gaya keadaan terbuka tanpa tombol JS, menggunakan atribut popover:
body:has(#search[open]) { overflow: hidden; }7. Teks artikel dengan setidaknya satu blok kode mendapat ukuran yang lebih luas:
article:has(pre) { max-width: 72ch; }Menghapus skrip DOM adalah refactor yang lebih bagus daripada kebanyakan refactor.
Firefox telah mendukungnya sejak v121, jadi daftar alasan browser lama akhirnya kosong. Hapus tag skrip dan biarkan pemilih yang bekerja. Jika Anda menginginkan sepupu tata letak trik ini, baca kueri penampung selanjutnya.