Bagaimana cara mendapatkan CSS untuk memilih ID yang dimulai dengan string (bukan dalam Javascript)?

194

Jika HTML memiliki elemen seperti ini:

id="product42"
id="product43"
...

Bagaimana cara mencocokkan semua id yang dimulai dengan "produk"?

Saya telah melihat jawaban yang melakukan ini persis menggunakan javascript, tetapi bagaimana melakukannya hanya dengan CSS?

html css css-selectors guptron
sumber

Jawaban:

364 
[id^=product]

^=menunjukkan "dimulai dengan". Sebaliknya, $=menunjukkan "diakhiri dengan".

Simbol sebenarnya dipinjam dari sintaks Regex, di mana ^dan $berarti "mulai dari string" dan "end of string" masing-masing.

Lihat spesifikasi untuk informasi lengkap.

Niet the Dark Absol
sumber
1
Terima kasih atas metode dan penjelasannya, saya telah mengedit pertanyaan saya jadi lebih jelas. Karena penasaran, apakah ada cara untuk mencocokkan string di dalam string id?
guptron
Lihat spesifikasinya , mereka menjelaskannya lebih baik daripada yang saya bisa!
Niet the Dark Absol
@ Itamar: Saya menghargai upaya Anda mengedit jawaban saya, tetapi kutipan hanya diperlukan jika nilainya berisi karakter yang bukan pengidentifikasi yang valid. productjelas merupakan pengidentifikasi yang valid, dan karena itu tidak memerlukan tanda kutip.
Niet the Dark Absol
Spesifisitas
3
@ Emerald214:not([id^=product])
Niet the Dark Absol
59

Saya akan melakukannya seperti ini:

[id^="product"] {
  ...
}

Idealnya, gunakan kelas. Ini adalah untuk kelas apa:

<div id="product176" class="product"></div>
<div id="product177" class="product"></div>
<div id="product178" class="product"></div>

Dan sekarang pemilih menjadi:

.product {
  ...
}
Blender
sumber
1
@Blender, terima kasih, saya memilih jawaban yang lain karena menjelaskan lebih banyak kepada saya dan memahami simbol yang digunakan. Saya tidak bisa menggunakan kelas untuk skenario ini, jika tidak, ya itu akan lebih baik.
guptron
-1

Saya perhatikan bahwa ada pemilih CSS lain yang melakukan hal yang sama. Sintaksnya adalah sebagai berikut:

[id|="name_id"]

Ini akan memilih semua elemen ID yang dimulai dengan kata yang dilampirkan dalam tanda kutip ganda.

Luigi Spezia
sumber
Bagaimana Anda memperhatikannya? referensi?
Ben Bozorg
Dok untuk ini di sini: w3.org/TR/selectors-3/#attribute-selectors Ini harus memilih semua id yang dimulai atau sama dengan "name_id"
Dessauges Antoine
att|=valTIDAK sama dengan att^=val. Dari referensi yang disebutkan: |=pemilih "Merupakan elemen dengan atribut att, nilainya menjadi tepat" val "atau dimulai dengan" val " segera diikuti oleh" - " ." Jadi id seperti "product42" tidak akan cocok dengan |=, tetapi "produk-42" akan.
Goozak