Tentukan beberapa penyeleksi atribut dalam CSS

296

Apa sintaks untuk melakukan sesuatu seperti:

input[name="Sex" AND value="M"]

Pada dasarnya, saya ingin memilih inputelemen yang memiliki atribut name="Sex"serta atribut value="M":

<input type="radio" name="Sex" value="M" />

Elemen-elemen seperti berikut ini tidak boleh dipilih:

<input type="radio" name="Sex" value="F" />
css attributes css-selectors John
sumber

Jawaban:

437

Sederhana input[name=Sex][value=M]akan sangat bagus. Dan sebenarnya dijelaskan dengan baik dalam dokumen standar :

Selektor atribut ganda dapat digunakan untuk merujuk ke beberapa atribut elemen, atau bahkan beberapa kali atribut yang sama.

Di sini, pemilih cocok dengan semua elemen SPAN yang atribut "halo" -nya memiliki nilai persis "Cleveland" dan yang atribut "selamat tinggal" persisnya memiliki nilai "Columbus":

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

Sebagai catatan tambahan, menggunakan tanda kutip di sekitar nilai atribut diperlukan hanya jika nilai ini bukan pengidentifikasi yang valid.

Demo JSFiddle

Raina77ow
sumber
8
apakah ada sesuatu seperti ini, tetapi ATAU bukannya DAN?
törzsmókus
4
Maksud Anda selain ,(koma)?
raina77ow
2
Anda tidak dapat menulis rentang [halo = "Cleveland"], [selamat tinggal = "Columbus"] tetapi Anda harus mengulangi bagian (mungkin panjang).
törzsmókus
Anda memang harus (setidaknya untuk saat ini), kecuali jika Anda menggunakan preprosesor. Konsultasikan utas ini untuk lebih jelasnya.
raina77ow
67

Untuk menggabungkannya:

input[name="Sex"][value="M"] {}

Dan untuk mengambil persatuan itu:

input[name="Sex"], input[value="M"] {}
Yogesh Khater
sumber
31

Gabungkan selektor atribut:

input[name="Sex"][value="M"]
Dennis
sumber
1
Perlu dicatat bahwa setidaknya satu dari nilai atribut harus dikutip. Ini akan gagal jika Anda menulisnya input[name=Sex][value=M]meskipun akan sah untuk memiliki pemilih dengan hanya satu atribut yang tidak menggunakan tanda kutip.
stevec
1
@stevec Apakah Anda bermaksud mengatakan ini pada jawaban yang diterima? Saya telah mengutip nilai-nilai dalam jawaban saya. Saya juga tidak berpikir itu benar. Anda perlu mengutip jika jawabannya berisi karakter tertentu tetapi tidak dalam contoh ini. mothereff.in/unquoted-attributes
Dennis
Saya menambahkan catatan itu karena saya mencobanya di beberapa browser tanpa tanda kutip dan semuanya gagal. Saya percaya bahwa masalahnya adalah bahwa tanpa tanda kutip pada setidaknya satu, itu ambigu karena dapat ditafsirkan sebagai input yang namanyaSex][value=M
stevec
kurung @stevec tidak valid dalam atribut yang tidak dikutip untuk alasan yang tepat. Contoh ini berfungsi di Firefox dan Chrome: jsfiddle.net/o2abekdh/3
Dennis
4

Hanya untuk menambahkan bahwa seharusnya tidak ada ruang antara pemilih dan braket pembuka. 

td[someclass]

akan bekerja. Tapi

td [someclass]

tidak akan.

Jean-Philippe Martin
sumber
-6 
[class*="test"],[class="second"] {
background: #ffff00;
}
Eli
sumber