() translation by (you can also view the original English article)
Ada saat-saat di mana saya berharap dapat memilih elemen induk dengan CSS - dan saya tidak sendirian dalam masalah ini. Namun, tidak ada hal seperti itu sebagai Parent Selector dalam CSS, jadi itu hanya tidak mungkin untuk sementara waktu.
Dalam tutorial ini kami akan mulai melalui beberapa kasus dimana memiliki CSS parent selector mungkin berguna, bersama dengan beberapa workarounds yang memungkinkan. Mari kita mulai!
Tunggu, apa itu Parent Selector?
CSS penyeleksi memungkinkan kita untuk elemen target, bergerak ke bawah dan seluruh pohon DOM, mendapatkan lebih spesifik ketika kita melakukannya. Berikut adalah contoh jenis selector yang mungkin Anda temukan di Bootstrap - dimulai dari bawah turunan DOM dari elemen nav.navbar-dark, ke ul, li, lalu akhirnya tautan a.nav-link.
1 |
.navbar-dark .navbar-nav .nav-item .nav-link { |
2 |
|
3 |
}
|
Parent selector akan memungkinkan kita untuk perjalanan kembali ke DOM, menargetkan elemen parent hal-hal tertentu. Sebagai contoh, kita akan dapat menargetkan parent dari .nav-link unsur-unsur dengan menggunakan:
1 |
.nav-link::parent { |
2 |
|
3 |
}
|
Catatan: contoh ini adalah kode murni palsu, itu tidak ada dan tidak menyarankan sintaks mungkin yang terbaik!
Kasus 1: Styling warisan konten
Styling Konten Legacy, dengan tanggal markup dan struktur, merupakan tantangan klasik ketika mendesain ulang sebuah website. Sebelum HTML5, misalnya, gambar mungkin biasanya memiliki telah diselimuti dengan p, div, atau kadang-kadang dengan span rentang bersama dengan p bersarang yang digunakan untuk membungkus teks gambar. Tidak ada cara standar untuk membungkus gambar dan keterangan. Kemudian, kami mengadopsi unsur-unsur figure dan figcaption, membuat struktur dokumen kami lebih semantik.
Kami ingin gambar dari konten warisan muncul seperti di atas. Tapi karena mungkin ada lebih banyak tag div dalam dokumen kami, orang-orang yang tidak berisi gambar, Deklarasi gaya berikut akan sangat tidak praktis.
1 |
.page-content div { |
2 |
padding: 15px; |
3 |
background-color: #f3f3f3; |
4 |
margin: 10px 0 20px; |
5 |
}
|
6 |
.page-content div img { |
7 |
marging: 0 0 10px; |
8 |
}
|
9 |
.page-content div .img-caption { |
10 |
color: #999; |
11 |
font-size: 12px; |
12 |
text-align: center; |
13 |
Wisplay: block; |
14 |
}
|
Itu akan berlaku warna latar belakang, padding dan margin untuk semua elemen div dalam konten. Kami benar-benar ingin menerapkan gaya ini secara eksklusif untuk elemen div yang membungkus gambar dan keterangan gambar.
Kasus 2: Menjaga Rasio Video
Contoh lain terlihat pada menjaga rasio video tertanam (seperti dari Youtube atau Vimeo), serta membuat video tak pasti . Hari ini, sebagian besar berkat kerja investigasi oleh Dave Rupert dan pals, diterima secara luas bahwa pendekatan yang terbaik adalah untuk menerapkan padding-top atau padding-bottom ke elemen parent.
Dalam dunia nyata, namun, kita mungkin tidak akan tahu elemen mana yang berisi video. Kita mungkin menemukan beberapa video tertanam yang dibungkus dalam sebuah div atau p tanpa nama pengenal kelas, sehingga sulit untuk memilih elemen tepat di mana untuk menerapkan gaya.
Oleh karena itu, menyatakan gaya sebagai berikut tidak lagi praktis karena hal itu akan mempengaruhi semua divs dalam .page-content termasuk yang mana saja tidak mengandung embedded video.
1 |
.page-content { |
2 |
width: 560px; |
3 |
margin-right: auto; |
4 |
margin-left: auto; |
5 |
margin-top: 30px; |
6 |
}
|
7 |
.page-content div { |
8 |
position: relative; |
9 |
padding-bottom: 56.25%; |
10 |
}
|
11 |
.page-content div iframe { |
12 |
position: absolute; |
13 |
top: 0; |
14 |
width: 100%; |
15 |
height: 100%; |
16 |
}
|
Alangkah indahnya jika langsung memilih elemem induk!
Kasus 3: Menanggapi Input Formulir
Dalam contoh ini kita memiliki bentuk dengan beberapa masukan. Ketika kita fokus pada salah satu masukan, diberikan warna perbatasan yang lebih menonjol, yang menyoroti posisi pengguna dalam bentuk.
Kadang-kadang Anda juga mungkin menemukan situasi yang mana tidak hanya perbatasan warna, tapi pembungkus elemen input disorot, membuat input bahkan lebih menonjol:
Elemen parent mungkin div atau p. Jadi, bagaimana kita bisa memilih elemen induk dengan tepat berdasarkan bagian tertentu dari turunannya?
Workarounds yang Memungkinkan
Seperti yang telah kita bahas, ada hal seperti parent selector, sehingga memilih induk tidak memungkinkan. Kita mungkin tergoda untuk menghindari masalah, dengan benar-benar mempertimbangkan kembali desain sehingga memilih induk terhindari. Tetapi jika itu tidak mungkin maka di sini adalah beberapa pendekatan yang potensial.
Menggunakan CSS :has() Selector
:has selector secara resmi disebut sebagai pseudo-class relasional. hal ini mencocokkan elemen berdasarkan turunan mereka, yang didefinisikan antara kurung.
Dalam contoh berikut, berlaku background-color untuk setiap div yang berisi keterangan gambar. Ini tampaknya membahas kasus 1.
1 |
.page-content div:has( .img-caption ) { |
2 |
padding: 15px; |
3 |
background-color: #ccc; |
4 |
}
|
Atau, jika kita ingin lebih spesifik, kita dapat menulis ulang untuk mencocokkan setiap tag div dengan .img-caption sebagai direct langsung.
1 |
.page-content div:has( > .img-caption ) { |
2 |
padding: 15px; |
3 |
background-color: #ccc; |
4 |
}
|
Selektor ini disusun untuk CSS Selector tingkat 4 meskipun browser belum menerapkannya. kami harus menunggu sedikir lebih lama sebelum pemilih ini terungkap Sampai saat itu, lihatlah kursus video berikut berjudul CSS masa depan untuk mengetahui bagaimana selector bekerja:
Menggunakan jQuery Parent Selector
Tak ada solusi CSS tunggal yang dapat memperbaiki masalah kita di sini, jadi mari kita lihat apa JavaScript dapat lakukan untuk kita sebagai gantinya. Dalam contoh ini kita akan menggunakan jQuery untuk kompatibilitas api, kenyamanan, dan browser yang kuat. Pada saat penulisan, jQuery menyediakan tiga cara untuk memilih elemen parent.
parent(); metode ini memilih induk langsung dari unsur yang ditargetkan. Kita dapat memanfaatkan metode ini untuk mengatasi semua kasus penggunaan kami sebutkan sebelumnya dalam tutorial.
Sebagai contoh, kami dapat menggunakan parent() untuk menambahkan kelas khusus untuk elemen pembungkus gambar dalam konten.
1 |
$( ".img-caption" ) |
2 |
.parent() |
3 |
.addClass( "has-img-caption" ); |
Kode di atas akan memilih langsung elemen pembungkus gambar, terlepas dari jenis elemen, menambahkan class has-img-caption untuk memberi kita lebih banyak kontrol atas elemen seleksi dan gaya, sebagai berikut.
parents() melihat bentuk plural dengan metode ini. Metode ini memungkinkan kita untuk memilih elemen parent dari cepat, sampai dengan akar dari dokumen, kecuali sebuah selector ditentukan sebagai argumen.
1 |
$( ".img-caption" ) |
2 |
.parents() |
3 |
.addClass( "has-img-caption" ); |
Diberikan contoh di atas, metode parents() memilih sepanjang jalan dari tag div yang segera membungkus gambar, div berikutnya, dan akhirnya html, menambahkan has-img-caption kelas untuk semua elemen.
Terlalu berlebihan seperti itu. Satu-satunya unsur yang mungkin akan perlu memiliki kelas yang ditambahkan, dalam hal ini, adalah elemen div segera. Maka kita lulus dalam metode argumen.
1 |
$( ".img-caption" ) |
2 |
.parents( "div" ) |
3 |
.addClass( "has-img-caption" ); |
Di sini, metode parents() yang akan melakukan perjalanan melalui gambar pohon leluhur ,memilih div setiap ditemukan dan memberikan kelas has-image-caption.
Jika itu masih terlalu memaksa, Anda dapat mempersempit pilihan ke satu elemen dengan menentukan indeks. Pada contoh berikut, kami menerapkan kelas hanya untuk div pertama.
1 |
var $parents = $( ".caption" ).parents( "div" ); |
2 |
$parents[0].addClass( "has-img-caption" ); // select the first div add add the class. |
parentsUntil(); metode ini memilih hingga elemen induk tetapi tidak termasuk elemen yang ditentukan dalam kurung.
1 |
$( ".caption" ) |
2 |
.parentsUntil( ".page-content" ) |
3 |
.addClass( "has-img-caption" ); |
Mengingat kode di atas, itu akan berlaku class has-img-caption untuk semua elemen parent kecuali elemen dengan .page-content.
Dalam beberapa kasus, di mana Anda memiliki unsur-unsur trilyun bersarang, menggunakan metode parentsUntil() lebih baik. Ini adalah comparably lebih cepat daripada metode parents() seperti menghindari menggunakan jQuery mesin pemilih (mendesis) untuk perjalanan di seluruh DOM pohon hingga document root.
Merangkum
Apakah kita cendrung memiliki CSS Selector induk di beberapa titik di masa depan?
Mungkin tidak. Jenis selector induk yang telah kita bahas di atas telah diusulkan berkali-kali, tetapi itu tidak pernah lulus tahap rancangan W3C untuk beberapa alasan. Ini adalah sebagian besar dari browser, karena cara browser untuk menghargai dan merender laman. Hal terdekat yang akan kita miliki di masa depan adalah selector relasional, :has().
Namun, karena :has() belum berlaku, JavaScript dan jQuery saat ini merupakan pendekatan yang paling andal. Ingat bahwa DOM Traversal adalah operasi yang dapat sangat penting kinerja perenderan situs Anda. Hindari menggunakan parents() atau parentsUntil() dengan operasi berat lainnya seperti animate(), fadeIn() atau fadeOut().
Lebih baik lagi, periksa struktur HTML bila mungkin untuk melihat apakah memilih elemen induk dapat dihindari sepenuhnya!
Sumber Lebih Lanjut
