wildcard * di CSS untuk kelas

670

Saya memiliki div ini yang saya styling dengan .tocolor, tetapi saya juga membutuhkan pengidentifikasi unik 1,2,3,4 dll jadi saya menambahkannya sebagai kelas lain tocolor-1.

<div class="tocolor tocolor-1">   tocolor 1   </div>
<div class="tocolor tocolor-2">   tocolor 2   </div>
<div class="tocolor tocolor-3">   tocolor 3   </div>
<div class="tocolor tocolor-4">   tocolor 4   </div>

.tocolor{
  background: red;
}

Apakah ada cara untuk hanya memiliki 1 kelas tocolor-*. Saya mencoba menggunakan wildcard *seperti pada css ini, tetapi tidak berhasil.

.tocolor-*{
  background: red;
}
css css-selectors wildcard Indonesia
sumber
1
Berikut adalah situs resmi CSS3 tentang penyeleksi: w3.org/TR/css3-selectors Dan daftar kompabilitas
GarfieldKlon

Jawaban:

1216

Apa yang Anda butuhkan disebut atribut selector. Contoh, menggunakan struktur html Anda, adalah sebagai berikut:

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red 
}

Di tempat divAnda dapat menambahkan elemen apa pun atau menghapusnya sama sekali, dan di tempat classAnda dapat menambahkan atribut apa pun dari elemen yang ditentukan.

[class^="tocolor-"]- dimulai dengan "tocolor-".
[class*=" tocolor-"]- berisi substring "tocolor-" yang terjadi langsung setelah karakter spasi.

Demo: http://jsfiddle.net/K3693/1/

Informasi lebih lanjut tentang pemilih atribut CSS, dapat Anda temukan di sini dan di sini . Dan dari MDN Documents MDN Documents

Sotiris
sumber
2
Info keren Hanya peringatan jika kinerja adalah masalah, sebagian besar CSS linter akan menolak pemilih atribut yang menyerupai regex (misalnya menggunakan '*') b / c kinerja lambat. Dengan pengecualian menggunakan preprosesor (mis. Sass), apakah ada cara lain yang memungkinkan untuk melakukan ini?
CodeFinity
2
Apakah ada cara untuk memeriksa apakah atribut kelas berisi beberapa substring? Mungkin kira-kira seperti itu div[class*="foo"][class="bar"]?
Connor
Ruang dalam contoh "berisi" kami cukup mematikan. Dari apa yang bisa saya lihat, itu seharusnya tidak ada di sana, benar?
Thomas
1
@Thomas Itu diperlukan untuk memastikan class="foo tocolor-red"pertandingan, tetapi tidakclass="foo fromtocolor-red-blue"
aleclarson
Terima kasih untuk ini. Saya telah menggunakan teknik ini selama beberapa tahun, tetapi tidak pernah menyadari bahwa kelas ^ = hanya berlaku untuk awal entri kelas HTML. Saya pikir itu berlaku untuk semua nama kelas yang ditentukan untuk tag HTML.
BevansDesign
108

Ya kamu bisa ini.

*[id^='term-']{
    [css here]
}

Ini akan memilih semua id yang dimulai dengan 'term-'.

Adapun alasan untuk tidak melakukan ini, saya melihat di mana akan lebih baik untuk memilih cara ini; untuk gaya, saya tidak akan melakukannya sendiri, tapi itu mungkin.

thomas.han
sumber
Terima kasih atas IDtambahan ini, bukan hanya untuk class.
Khom Nazid
26

Solusi alternatif:

div[class|='tocolor'] akan cocok dengan nilai atribut "class" yang dimulai dengan "tocolor-", termasuk "tocolor-1", "tocolor-2", dll.

Berhati-hatilah karena ini tidak cocok 

<div class="foo tocolor-">

Referensi: https://www.w3.org/TR/css3-selectors/#attribute-representation

[att|=val]

Merupakan elemen dengan atribut att, nilainya menjadi "val" atau diawali dengan "val" segera diikuti oleh "-" (U + 002D)

adroitec
sumber
12
Ini tidak akan berfungsi jika classatribut dimulai dengan beberapa kelas lain yang tidak dimulai tocolor.
BoltClock
1
Ini juga berfungsi dengan baik di widget style style Qt. Misalnya, untuk menerapkan gaya ke semua label yang dinamai foo*, Anda akan lakukanQLabel[objectName|='foo'] { ... }
Pasang kembali Monica
Seperti @BoltClock berkata, solusi ini rusak jika elemen memiliki beberapa kelas dan mereka tidak mulai dengan kelas yang dicari OP.
Dan Dascalescu
Namun tidak bekerja di Chrome 78, * dan ^ tidak berfungsi.
Gordon Mohrin
3

Jika Anda tidak memerlukan pengidentifikasi unik untuk penataan divs lebih lanjut dan menggunakan HTML5, Anda dapat mencoba dan menggunakan Atribut Data khusus. Baca di sini atau coba pencarian googleHTML5 Custom Data Attributes

DKSan
sumber