CSS3Tingkat: Menengah7 min
Selektor Induk Relasional (:has) di CSS Modern
Gantikan skrip JavaScript yang rumit untuk memodifikasi elemen induk: kuasai pseudo-class :has() yang bertindak sebagai pemilih induk (parent selector) relasional.
Mengapa :has() Merevolusi Desain CSS?
Pratinjau TerbukaSecara historis, CSS hanya bisa memilih elemen ke arah bawah (anak atau saudara berikutnya). Dengan :has(), sebuah elemen induk dapat diberi style khusus jika memiliki anak elemen tertentu.
Contoh Kode Sintaks
/* Beri border merah menyala pada form card jika ada input yang invalid */
.kartu-form:has(input:invalid) {
border-color: #ef4444;
box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
}
/* Gelapkan seluruh halaman saat navigasi drawer terbuka */
body:has(#nav-drawer:checked) {
overflow: hidden;
}
/* Gaya kartu artikel yang memiliki media video */
.artikel-card:has(video) {
grid-column: span 2;
}Live Compiler Runner
Akses Kursus Wajib Login
Buka Akses Penuh Silabus & Praktikum
Masuk dengan akun GitHub, Google, atau Akses Cepat Developer untuk membuka seluruh materi mendalam, menjalankan compiler interaktif, mengerjakan kuis, dan menyimpan progres belajar Anda.
145+ Modul Lengkap•Tersimpan Otomatis•Sertifikat Kelulusan Resmi