(atribut) - Trik CSS

Anonim

Ada banyak cara untuk memilih elemen di CSS. Pilihan paling dasar adalah dengan nama tag, seperti p ( ). Hampir semua hal yang lebih spesifik daripada pemilih tag menggunakan atribut - classdan IDkeduanya memilih atribut tersebut pada elemen HTML. Tetapi classdan IDbukan satu-satunya atribut yang dapat dipilih pengembang. Kita dapat menggunakan salah satu atribut elemen sebagai pemilih.

Pemilihan atribut memiliki sintaks khusus. Berikut contohnya:

a(href="https://css-tricks.com") ( color: #E18728; )

Itu adalah pemilih pencocokan tepat yang hanya akan memilih link dengan nilai hrefatribut yang tepat "https://css-tricks.com".

Tujuh Jenis Yang Berbeda

Atribut pemilih peka huruf besar-kecil secara default (lihat pencocokan tidak peka huruf besar-kecil di bawah), dan ditulis di dalam tanda kurung ().

Ada tujuh jenis pencocokan yang dapat Anda temukan dengan pemilih atribut, dan sintaksnya berbeda untuk masing-masing. Setiap penyeleksi atribut yang lebih kompleks membangun sintaks dari pemilih pencocokan tepat - semuanya dimulai dengan nama atribut dan diakhiri dengan tanda sama dengan diikuti oleh nilai atribut, biasanya dalam tanda kutip. Apa yang berada di antara nama atribut dan tanda sama dengan itulah yang membuat perbedaan di antara para penyeleksi.

(data-value) ( /* Attribute exists */ ) (data-value="foo") ( /* Attribute has this exact value */ ) (data-value*="foo") ( /* Attribute value contains this value somewhere in it */ ) (data-value~="foo") ( /* Attribute has this value in a space-separated list somewhere */ ) (data-value^="foo") ( /* Attribute value starts with this */ ) (data-value|="foo") ( /* Attribute value starts with this in a dash-separated list */ ) (data-value$="foo") ( /* Attribute value ends with this */ )

Nilai berisi: nilai atribut berisi istilah sebagai satu-satunya nilai, nilai dalam daftar nilai, atau sebagai bagian dari nilai lain. Untuk menggunakan selektor ini, tambahkan tanda bintang (*) sebelum tanda sama dengan. Misalnya, img(alt*="art")akan memilih gambar dengan teks alt “seni abstrak” dan “atlet yang memulai olahraga baru”, karena nilai “seni” ada pada kata “mulai”.

Nilai ada dalam daftar yang dipisahkan spasi: nilai adalah satu-satunya nilai atribut, atau merupakan nilai keseluruhan dalam kumpulan nilai yang dipisahkan spasi. Tidak seperti pemilih "berisi", pemilih ini tidak akan mencari nilai sebagai fragmen kata. Untuk menggunakan selektor ini, tambahkan tilde (~) sebelum tanda sama dengan. Misalnya, img(alt~="art")akan memilih gambar dengan teks alt "seni abstrak" dan "pertunjukan seni", tetapi bukan "atlet yang memulai olahraga baru" (yang akan dipilih oleh pemilih "berisi").

Nilai dimulai dengan: nilai atribut dimulai dengan istilah yang dipilih. Untuk menggunakan selektor ini, tambahkan tanda sisipan (^) sebelum tanda sama dengan. Jangan lupa, sensitivitas huruf penting. Misalnya, img (alt = "seni") akan memilih gambar dengan teks alt "pertunjukan seni" dan "pola artistik", tetapi bukan gambar dengan teks alt "Arthur Miller" karena "Arthur" diawali dengan huruf kapital .

Nilai berada di urutan pertama dalam daftar yang dipisahkan tanda hubung: Pemilih ini sangat mirip dengan pemilih "dimulai dengan". Di sini, pemilih mencocokkan nilai yang merupakan satu-satunya nilai atau yang pertama dalam daftar nilai yang dipisahkan tanda hubung. Untuk menggunakan selektor ini, tambahkan karakter pipa (|) sebelum tanda sama dengan. Misalnya, li(data-years|="1900")akan memilih item daftar dengan data-yearsnilai "1900-2000", tetapi bukan item daftar dengan data-yearsnilai "1800-1900".

Nilai diakhiri dengan: nilai atribut diakhiri dengan istilah yang dipilih. Untuk menggunakan selektor ini, tambahkan tanda dolar ($) sebelum tanda sama dengan. Misalnya, a(href$="pdf")memilih setiap tautan yang diakhiri dengan .pdf.

Catatan tentang tanda kutip: Anda dapat menggunakan nilai tanpa tanda kutip dalam beberapa situasi, tetapi aturan untuk memilih tanpa tanda kutip tidak konsisten di semua browser. Kutipan selalu berhasil, jadi jika Anda tetap menggunakannya, Anda dapat yakin pemilih Anda akan berfungsi.

Lihat Pen Attribute Selectors oleh CSS-Tricks (@ css-trick) di CodePen.

Fakta menyenangkan: nilai-nilai tersebut diperlakukan sebagai string, jadi Anda tidak perlu melakukan pelarian karakter yang berlebihan untuk membuatnya cocok, seperti yang Anda lakukan jika Anda menggunakan karakter yang tidak biasa dalam kelas atau pemilih ID.

(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )

Pencocokan tidak peka huruf besar / kecil

Pemilih atribut yang tidak peka huruf besar / kecil adalah bagian dari spesifikasi Level 4 Penyeleksi Kelompok Kerja CSS. Seperti yang disebutkan di atas, string nilai atribut secara default peka huruf besar / kecil, tetapi dapat diubah menjadi tidak peka huruf besar / kecil dengan menambahkan itepat sebelum tanda kurung tutup:

(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )

Pencocokan tidak peka huruf besar / kecil bisa sangat berguna untuk menargetkan atribut yang memiliki teks tulisan manusia yang tidak dapat diprediksi. Misalnya, Anda menata balon ucapan di aplikasi obrolan dan ingin menambahkan "melambaikan tangan" ke pesan apa pun dengan teks "halo" dalam beberapa bentuk. Anda dapat melakukannya hanya dengan CSS, menggunakan pencocokan tidak peka huruf besar / kecil untuk menangkap semua kemungkinan variasi:

Lihat atribut CSS Case-insensitive CSS yang cocok dengan CSS-Tricks (@ css-trick) di CodePen.

Menggabungkannya

Anda dapat menggabungkan pemilih atribut dengan pemilih lain, seperti tag, kelas, atau ID.

div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )

Atau bahkan menggabungkan beberapa pemilih atribut. Contoh ini menyeleksi gambar dengan alt teks yang mencakup kata “orang” sebagai satu-satunya nilai atau nilai dalam daftar terpisah ruang, dan sebuah srcnilai yang mencakup nilai “lorem”:

img(alt~="person")(src*="lorem") ( /* style rules here */ )

Lihat Pen Combined Attributes dan Attribute-Only Selection oleh CSS-Tricks (@ css-trick) di CodePen.

Atribut Selectors di JavaScript dan jQuery

Pemilih atribut dapat digunakan di jQuery seperti pemilih CSS lainnya. Di JavaScript, Anda dapat menggunakan pemilih atribut dengan document.querySelector()dan document.querySelectorAll().

Lihat Pen Attribute Selectors di JS dan jQuery oleh CSS-Tricks (@ css-trick) di CodePen.

Terkait

  • kelas
  • Indo

Informasi Lebih Lanjut

  • The Skinny on Attribute Selectors
  • Atribut selektor di MDN
  • Atribut selektor dalam spesifikasi CSS W3C

Dukungan Browser

Chrome Safari Firefox Opera YAITU Android iOS
Apa saja Apa saja Apa saja Apa saja 7+ Apa saja Apa saja