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

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

5

Gunakan pemilih atribut

[id^=product]{property:value}

— Musa
sumber

-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