Pilih elemen menurut atribut data dalam CSS

Jawaban:

776

Jika Anda bermaksud menggunakan pemilih atribut , tentu saja, mengapa tidak:

[data-role="page"] {
    /* Styles */
}

Ada berbagai penyeleksi atribut yang dapat Anda gunakan untuk berbagai skenario yang semuanya tercakup dalam dokumen yang saya tautkan. Perhatikan bahwa, meskipun atribut data khusus menjadi "fitur HTML5 baru",

  • browser biasanya tidak memiliki masalah yang mendukung atribut non-standar, jadi Anda harus dapat memfilternya dengan pemilih atribut; dan

  • Anda juga tidak perlu khawatir tentang validasi CSS, karena CSS tidak peduli dengan nama atribut yang tidak menggunakan namespace asalkan tidak melanggar sintaks pemilih.

BoltClock
sumber
4
Apakah kompatibel dengan semua navigator?
Christophe Debove
21
@ Christophe Debove: IE7 + dan yang lainnya.
BoltClock
7
CSS sepertinya tidak mendeteksi ini jika atribut data disetel, atau diubah melalui JS.
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
30
Setelah investigasi lebih lanjut akan muncul $("#element").data("field","value");tidak mengubah nilai atribut data itu hanya memodifikasi versi cache DOM jQuery. Untuk mengubah atribut DOM yang sebenarnya, seseorang perlu menggunakan $("#element").attr("data-field","value");. Membuat komentar asli saya tidak valid.
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
2
Ya, sepertinya mengubah dataset juga berfungsi @Matthew - jsfiddle.net/BoltClock/k378xgj3 Terima kasih atas jQuery.
BoltClock
107

Anda juga dapat memilih atribut apa pun kontennya, di peramban modern

dengan: 

[data-my-attribute] {
   /* Styles */
}

[anything] {
   /* Styles */
}

Misalnya: http://codepen.io/jasonm23/pen/fADnu

Bekerja pada persentase browser yang sangat signifikan.

Catatan ini juga dapat digunakan dalam pemilih JQuery, atau menggunakan document.querySelector

ocodo
sumber
Wow, saya tidak pernah melihatnya bisa digunakan seperti itu !! +1! Dan FWIW, sekarang browser sudah kedaluwarsa, saya percaya itu bekerja di IE7 + sehingga dukungannya cukup banyak. Sangat lucu bahkan Chris Coyier tidak menyebutkannya di sini
Camilo Martin
Terima kasih @CamiloMartin, saya telah menghapus tautan peramban untuk menghindari kebingungan / gangguan.
ocodo
Menambahkan tautan ke utas Chris Coyier css-tricks.com/attribute-selectors/#comment-965838 @CamiloMartin
ocodo
1
Tidak satu pun dari sintaks ini yang baru - lebih banyak orang terkejut bahwa IE6 tidak mendukungnya daripada IE7 +. Anda dapat mengasumsikan semua penyeleksi CSS2.1 didukung di IE8 dan yang lebih baru - IE7 yang paling banyak melakukannya, walaupun dengan beberapa bug yang tidak jelas. Semua browser modern telah mendukung penyeleksi level 3 untuk sementara waktu, dengan Chrome yang menjadi buggy sebagai gantinya.
BoltClock
1
Karena kita berada di topik pemilih atribut, menarik untuk dicatat bahwa pemilih atribut substring yang diperkenalkan di level 3 ( ^=, *=dan $=) juga didukung oleh IE7 dan IE8. Mungkin mereka diperkenalkan di IE sebelum distandarisasi.
BoltClock
47

Perlu dicatat pemilih pemilih substring CSS3

[attribute^=value] { /* starts with selector */
/* Styles */
}

[attribute$=value] { /* ends with selector */
/* Styles */
}

[attribute*=value] { /* contains selector */
/* Styles */
}
Matas Vaitkevicius
sumber
13

Anda dapat menggabungkan beberapa penyeleksi dan ini sangat keren mengetahui bahwa Anda dapat memilih setiap atribut dan atribut berdasarkan nilainya seperti hrefberdasarkan pada nilainya dengan CSS saja ..

Selektor atribut memungkinkan Anda bermain-main dengan beberapa tambahan iddan classatribut

Berikut ini adalah bacaan yang mengagumkan tentang Atribut Selectors

Biola

a[href="http://aamirshahzad.net"][title="Aamir"] {
  color: green;
  text-decoration: none;
}

a[id*="google"] {
  color: red;
}

a[class*="stack"] {
  color: yellow;
}
<a href="http://aamirshahzad.net" title="Aamir">Aamir</a>
<br>
<a href="http://google.com" id="google-link" title="Google">Google</a>
<br>
<a href="http://stackoverflow.com" class="stack-link" title="stack">stack</a>
Luaskan cuplikan

Dukungan browser:
IE6 +, Chrome, Firefox & Safari

Anda dapat memeriksa detailnya di sini .

Aamir Shahzad
sumber
4 
    [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 */
}
Navan Khan
sumber