Bagaimana cara menargetkan elemen dengan atribut yang memiliki nilai apa pun di CSS?

Saya tahu bahwa saya dapat menargetkan elemen yang memiliki atribut tertentu di CSS, misalnya:

input[type=text]
{
    font-family: Consolas;
}

Tetapi apakah mungkin untuk menargetkan elemen yang memiliki atribut dengan nilai apa pun (kecuali tidak ada, yaitu ketika atribut belum ditambahkan ke elemen)?

Kurang lebih seperti:

a[rel=*]
{
    color: red;
}

Yang harus menargetkan <a>tag pertama dan ketiga di HTML ini:

<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>

Saya pikir itu mungkin karena secara default, cursor: pointertampaknya diterapkan ke <a>tag apa pun yang memiliki nilai untuk hrefatributnya.

Yang berikut ini akan cocok dengan semua tag jangkar dengan relatribut yang ditentukan:

a[rel]
{
    color: red;
}

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

Pembaruan: Untuk memperhitungkan skenario @vsync yang disebutkan, di bagian komentar (membedakan antara nilai emtpy / non-kosong), Anda dapat memasukkan :not pseudo-class CSS :

a[rel]:not([rel=""])
{
    color: red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

Ya di selektor CSS 3 ada beberapa selektor atribut .

Misalnya

[att] Mewakili elemen dengan atribut att, berapapun nilai atributnya.

[att = val] Merupakan elemen dengan atribut att yang nilainya persis "val".

[att ~ = val] Merepresentasikan elemen dengan atribut att yang nilainya berupa daftar kata yang dipisahkan spasi, salah satunya adalah "val". Jika "val" berisi spasi, itu tidak akan pernah mewakili apapun (karena kata-kata dipisahkan oleh spasi). Juga jika "val" adalah string kosong, itu tidak akan pernah mewakili apapun.

[att ^ = val] Mewakili elemen dengan atribut att yang nilainya dimulai dengan awalan "val". Jika "val" adalah string kosong maka selektor tidak mewakili apapun.

[att $ = val] Mewakili elemen dengan atribut att yang nilainya diakhiri dengan sufiks "val". Jika "val" adalah string kosong maka selektor tidak mewakili apapun.

[att * = val] Mewakili elemen dengan atribut att yang nilainya berisi setidaknya satu instance substring "val". Jika "val" adalah string kosong maka selektor tidak mewakili apapun.

Harus menambahkan bahwa jika browser menyetel atribut secara default, Anda mungkin perlu mengatasinya. Tampaknya ini tidak menjadi masalah di broser "modern", namun, ini adalah masalah yang pernah saya lihat, jadi pastikan untuk memeriksa kinerja lintas browser.

Misalnya, saya menemukan bahwa di IE sebelum 9, colSpan diatur untuk semua TD dalam Tabel, jadi setiap sel memiliki nilai colspan tersembunyi 1.

Jadi jika Anda menargetkan "sembarang TD dengan atribut colspan" yang Anda terapkan di webdoc Anda, bahkan td yang tidak memiliki kumpulan atribut colspan, seperti TD apa pun yang menjadi satu sel, akan menerima gaya css. IE kurang dari 9 pada dasarnya akan menata semuanya!

Satu-satunya alasan untuk mengkhawatirkan ini adalah semua pengguna XP yang tersisa di luar sana yang tidak dapat memutakhirkan di atas IE8.

Jadi sebagai Contoh, saya memiliki sekelompok tabel di mana konten dapat bergeser dari ujung ke ujung, meninggalkan 1 hingga 7 sel kosong baik di akhir atau di awal.

Saya ingin menerapkan warna ke setiap sel kosong di akhir atau awal menggunakan atribut colspan. Penggunaan berikut ini tidak akan berfungsi di IE kurang dari 9

#my td[colspan] {background-color:blue;}

... semua TD akan ditata (lucu karena gaya atribut bersyarat seharusnya lebih unggul di IE, tapi saya ngelantur ...).

Menggunakan karya-karya berikut di semua browser ketika saya menetapkan nilai colspan ke 'single' untuk sel tunggal / TD yang ingin saya sertakan dalam skema gaya, namun ini adalah 'retas' dan tidak akan memvalidasi dengan benar ...

#my td[colspan="single"] {background-color:blue;} /* 'single' could be anything */
#my td[colspan="2"] {background-color:blue;}
#my td[colspan="3"] {background-color:blue;}
#my td[colspan="4"] {background-color:blue;}
#my td[colspan="5"] {background-color:blue;}
#my td[colspan="6"] {background-color:blue;}
#my td[colspan="7"] {background-color:blue;}

Alternatifnya, Anda semestinya dapat mengatasi masalah dengan lebih tepat menggunakan gaya bersyarat menggunakan "if lt IE 9" untuk mengganti. Ini akan menjadi cara yang benar untuk melakukan ini, hanya perlu diingat Anda harus menyembunyikan "css yang dibangun dengan benar" dari IElt9 dalam prosesnya, dan saya pikir satu-satunya cara yang tepat untuk melakukannya adalah dengan lembar gaya selektif.

Sebagian besar dari kita sudah melakukannya, tetapi bagaimanapun juga, Anda masih sebaiknya mempertimbangkan dan menguji apakah browser menerapkan atribut otomatis ketika tidak ada, dan bagaimana browser dapat menangani sintaksis Anda yang sebaliknya untuk mengatur gaya pada nilai atribut.

(btw, colspan kebetulan belum ada dalam spesifikasi css [sejak css3], jadi contoh ini tidak menampilkan kesalahan validasi.)