Pemilih CSS dengan titik dalam ID

97

Spesifikasi HTML memungkinkan untuk titik (.) Dalam sebuah id:

<img id="some.id" />

Namun, menggunakan aturan pemilih ID CSS tidak akan cocok dengan benar:

#some.id { color: #f00; }

Spesifikasi CSS untuk ID Selectors tidak menyebutkan kasus ini. Jadi saya menganggap itu menggunakan kombinasi nama tag dan pemilih kelas ? Misalnya, aturan CSS a.classNameakan berlaku untuk semua tag jangkar ( <a>) dengan nama kelas className, seperti <a class="className"></a>.

Apakah mungkin memiliki aturan file CSS eksternal yang mereferensikan elemen HTML dengan id-nya yang memiliki titik di dalamnya?

Saya tidak berharap karena CSS menentukan bahwa " pengenal " CSS tidak menyertakan titik sebagai karakter yang valid. Jadi, apakah ini ketidakcocokan mendasar antara spesifikasi HTML dan CSS? Apakah satu-satunya alternatif saya untuk menggunakan jenis pilihan CSS yang berbeda? Adakah yang lebih pintar dari saya untuk mengkonfirmasi atau menyangkal ini?

(Saya akan menghapus titik dari atribut id HTML untuk menyederhanakan banyak hal, tetapi ini adalah id yang dihasilkan sistem, jadi saya tidak memiliki kemampuan untuk mengubahnya dalam kasus ini.)

html css css-selectors Jon Adams
sumber
Bisa dibilang ini adalah ketidaksesuaian mendasar antara HTML dan CSS. Namun, karena keduanya adalah bahasa yang berbeda, tidak diharapkan keduanya cocok; pengenal HTML adalah pengenal HTML sedangkan pengenal CSS adalah pengenal CSS. Selain itu, CSS juga dapat mengatur gaya bahasa lain, tidak hanya HTML (meskipun diberikan, CSS dibuat untuk HTML pada awalnya).
BoltClock
3
Juga #some.idmenggunakan kombinasi ID dan pemilih kelas.
BoltClock
Apakah ID satu-satunya atribut yang Anda miliki sebagai pengait gaya? Saya tahu ini sedikit di luar topik, tapi saya bertanya-tanya mengapa Anda ingin menggunakan ID daripada img atau kelas (jika tersedia).
Jayx
@Jayx RE "Mengapa menggunakan ID, bukan img (tag) atau kelas?" Ini bervariasi karena banyak alasan dan situasi. Namun dalam kasus ini, elemen tertentu perlu diberi gaya, tidak semua gambar di halaman. Kelas dapat digunakan jika HTML dapat dimodifikasi, tetapi dalam kasus ini tidak dapat dimodifikasi karena dibuat oleh sistem di luar kendali kami.
Jon Adams

Jawaban:

194

Klasik. Tepat setelah menggali semua spesifikasi yang menulis pertanyaan, saya membacanya lagi dan menemukan ada karakter pelarian. Saya tidak pernah membutuhkannya sebelumnya, tetapi spesifikasi CSS memungkinkan garis miring terbalik (\) keluar seperti kebanyakan bahasa. Apa yang Anda tahu?

Jadi dalam contoh saya, aturan berikut akan cocok:

#some\.id { color: #f00; }

Jon Adams
sumber
8
Pekerjaan penelitian yang bagus. Seharusnya ada lebih banyak Tanya Jawab seperti ini, tidak seperti „tulis kode saya alih-alih saya“.
Pavlo
3
penelitian yang bagus. Saya baru saja menemukan ini di aplikasi perusahaan besar yang sedang saya kerjakan. Saya benar-benar bingung dan belum pernah melihatnya sebelumnya. apa gunanya membuat id dengan titik di dalamnya ??
Anthony
1
@Anthony: Tidak ada alasan khusus untuk menempatkan titik dalam atribut id HTML. Saya kira terkadang penulis hanya ingin? Mungkin dalam beberapa kasus, ini dapat diambil alih dari sistem implementasi yang mendasari yang mungkin menggunakan titik dalam pengidentifikasi kode sisi server untuk pemrosesan formulir? Saya yakin setiap orang memiliki alasannya sendiri; tetapi tidak ada alasan HTML / CSS untuk menyertakannya.
Jon Adams
1
Terima kasih, saya mengalami masalah dengan OpenLayers karena menggunakan titik di id-nya. Misalnya: "OpenLayers.Control.Attribution_7". Saya kira itu membantu dengan kode internal di mana mereka dapat memiliki nama variabel javascript menjadi nilai yang sama dengan id itu sendiri.
Hoffmann
3
Saya sedang mempertimbangkan untuk menambahkan pertanyaan baru dan menulis jawaban saya sendiri, tetapi memutuskan untuk hanya berkomentar di sini. Jika Anda menggunakan praprosesor Stylus, Anda perlu menggunakan dua garis miring terbalik, misalnya #some\\.iduntuk keluar dari karakter khusus. Garis miring terbalik pertama digunakan oleh Stylus, meninggalkan garis miring terbalik yang tersisa di CSS yang dikompilasi, yang mencapai hasil yang diinginkan seperti yang dijelaskan dalam jawaban ini.
markrian
22

Anda juga bisa menggunakan img [id = some.id]]

Info lebih lanjut di sini: http://www.w3.org/TR/selectors/#attribute-selectors

SDD512
sumber
1
Ini mungkin berfungsi di beberapa browser, tetapi saya telah melihat kesalahan yang dilemparkan untuk pemilih atribut juga. Anda masih bisa melarikan diri ., seolah- \.olah.
Chris Jaynes