: target - Trik CSS | CSS Almanak 2024

The :targetsemu pemilih di CSS cocok ketika hash dalam URL dan id dari elemen yang sama. Misalnya, jika URL saat ini adalah:

https://css-tricks.com/#voters

Dan ini ada di HTML:

 Content

Pemilih ini akan cocok dengan:

:target ( background: yellow; )

Dan sectionelemen itu akan memiliki latar belakang kuning.

Dengan pemilih generik (cocok dengan apa pun yang kebetulan menjadi target), jika URL diubah menjadi diakhiri #faqdan ada elemen lain dengan ID faq, pemilih itu akan cocok lagi dan #faqelemen akan memiliki latar belakang kuning.

Anda dapat membatasinya dengan lebih spesifik tentang elemen mana yang ingin Anda targetkan, seperti

#voters:target ( )

Kapan Anda akan menggunakan ini?

Salah satu kemungkinannya adalah ketika Anda menginginkan gaya dengan "keadaan". Saat halaman memiliki hash tertentu, itu dalam status itu. Ini tidak serba guna seperti memanipulasi nama kelas (karena hanya ada satu dan hanya bisa terkait dengan satu elemen) tetapi serupa. Apa pun yang dapat Anda lakukan untuk mengubah kelas untuk mengubah status yang dapat Anda lakukan saat elemen berada di :target. Misalnya: mengubah warna, mengubah posisi, mengubah gambar, menyembunyikan / menampilkan sesuatu, apa pun.

Saya akan menggunakan aturan praktis ini untuk kapan :targetadalah pilihan yang baik:

Saat "negara bagian" dibutuhkan
Saat perilaku jump-down / hash-link dapat diterima
Kapan boleh memengaruhi riwayat browser

Bagaimana Anda mendapatkan hash di URL?

Cara paling umum adalah dengan mengklik link yang menyertakan hash pengguna. Bisa berupa link internal (halaman yang sama) atau URL yang sepenuhnya memenuhi syarat yang diakhiri dengan hash dan nilai. Contoh:

Go To There Go To There

Perilaku Melompat

Terlepas dari apakah itu link halaman yang sama atau bukan, perilaku browser adalah menggulir halaman hingga elemen tersebut berada di bagian atas halaman . Atau, sejauh mungkin jika tidak dapat menggulir sejauh itu. Ini agak penting untuk diketahui, karena ini berarti mengeksploitasi perilaku yang "dinyatakan" ini agak rumit / terbatas.

Misalnya, saya pernah mencoba berbagai teknik untuk mereplikasi tab CSS yang berfungsi, tetapi akhirnya memutuskan menggunakan peretasan kotak centang adalah ide yang lebih baik karena menghindari masalah lompatan halaman. Ian Hansson di CSS Science memiliki beberapa contoh tab juga. Contoh ketiganya menggunakan :target, dan elemen yang benar-benar diposisikan tersembunyi di atas bagian atas halaman untuk mencegah perilaku lompatan halaman. Ini pintar, tetapi solusi sempurna secara keseluruhan, karena itu berarti halaman akan melompat ke atas jika tab turun lebih jauh pada halaman.

Informasi Lebih Lanjut

Artikel di sini tentang CSS-Tricks: On: target
Selector Level 4 spec
Sebuah galeri gambar sederhana menggunakan: target (menderita hal lompatan halaman, contoh bagusnya) oleh Chris Heilmann
Demo teknik pudar kuning (meskipun untuk konten yang sudah ada, bukan konten yang baru ditambahkan) dari Notebook Web Designer.
Target CSS, secara harfiah, oleh Caleb Ogden.
CSS: target untuk desain di luar layar
Dokumen MDN