Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Memilih Elemen Induk dengan CSS dan jQuery

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Puuma (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.

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:

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.

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.

Youtube embed wrapped in a div
Potongan kode dari CSS-Trik: Fluid width video

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.

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:

Input form fokus.

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.

Atau, jika kita ingin lebih spesifik, kita dapat menulis ulang untuk mencocokkan setiap tag div dengan .img-caption sebagai direct langsung.

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.

Gambar struktur kandungan warisan.

Sebagai contoh, kami dapat menggunakan parent() untuk menambahkan kelas khusus untuk elemen pembungkus gambar dalam konten.

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.

Image HTML Class Added
Gambar struktur dalam warisan konten dengan kelas tambahan.

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.

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.

Kelas telah-img-keterangan diterapkan dengan metode parents().

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.

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.

parentsUntil(); metode ini memilih hingga elemen induk tetapi tidak termasuk elemen yang ditentukan dalam kurung.

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 

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.