Menggunakan ekspresi reguler di css?

Saya memiliki halaman html dengan div yang memiliki id dalam bentuk s1 , s2 dan seterusnya.

<div id="sections">
   <div id="s1">...</div>
   <div id="s2">...</div>
   ...
</div>

Saya ingin menerapkan properti css ke subset dari bagian / div ini (tergantung pada id). Namun, setiap kali saya menambahkan div , saya harus menambahkan css untuk bagian tersebut secara terpisah seperti ini.

//css
#s1{
...
}

Apakah ada sesuatu seperti ekspresi reguler di css yang dapat saya gunakan untuk menerapkan gaya ke satu set div .

Anda dapat mengatur pemilihan elemen tersebut tanpa bentuk ekspresi reguler seperti yang ditunjukkan oleh jawaban sebelumnya, tetapi untuk menjawab pertanyaan secara langsung, ya Anda dapat menggunakan bentuk ekspresi reguler di pemilih:

#sections div[id^='s'] {
    color: red;  
}

Yang mengatakan pilih elemen div di dalam #sections div yang memiliki ID yang dimulai dengan huruf 's'.

Lihat biola di sini .

Dokumen pemilih CSS W3 di sini .

Sebagai pelengkap dari jawaban ini, Anda dapat menggunakan $untuk mendapatkan kecocokan akhir dan *untuk mendapatkan kecocokan di mana saja dalam nama nilai.

Cocok di mana saja: .col-md, .left-col, .col, .tricolor, dll

[class*="col"]

Cocok di awal: .col-md, .col-sm-6, dll

[class^="col-"]

Cocok di ending: .left-col, .right-col, dll

[class$="-col"]

ID dimaksudkan untuk mengidentifikasi elemen secara unik . Gaya apa pun yang diterapkan padanya juga harus unik untuk elemen itu. Jika Anda memiliki gaya yang ingin Anda terapkan ke banyak elemen, Anda harus menambahkan kelas ke semuanya, daripada mengandalkan pemilih ID ...

<div id="sections">
   <div id="s1" class="sec">...</div>
   <div id="s2" class="sec">...</div>
   ...
</div>

dan

.sec {
    ...
}

Atau dalam kasus spesifik Anda, Anda dapat memilih semua divisi di dalam container induk Anda, jika tidak ada yang lain di dalamnya, seperti:

#sections > div {
    ...
}

Pertama-tama, ada banyak cara untuk mencocokkan item dalam dokumen HTML. Mulailah dengan referensi ini untuk melihat beberapa pemilih / pola yang tersedia yang dapat Anda gunakan untuk menerapkan aturan gaya ke sebuah elemen.

http://www.w3.org/TR/selectors/

Cocokkan semua divyang merupakan keturunan langsung dari #main.

#main > div

Cocokkan semua divyang merupakan keturunan langsung atau tidak langsung dari #main.

#main div

Cocokkan yang pertama divyang merupakan keturunan langsung dari #sections.

#main > div:first-child

Cocokkan divdengan atribut tertentu.

#main > div[foo="bar"]

Anda dapat 'menambahkan kelas ke setiap DIV Anda dan menerapkan aturan ke kelas dengan cara ini:

HTML:

<div class="myclass" id="s1">...</div>
<div class="myclass" id="s2">...</div>

CSS:

//css
.myclass
{
   ...
}

Saya biasanya menggunakan *ketika saya ingin mendapatkan semua string yang berisi karakter yang diinginkan.

* digunakan dalam regex, menggantikan semua karakter.

Digunakan di SASS atau CSS akan seperti [id*="s"]itu dan itu akan mendapatkan semua elemen DOM dengan id "s ......".

/* add red color to all div with id s .... elements */

div[id^="s"] {
    color: red;
}

Coba ekspresi reguler CSS generik saya

(([a-z]{5,6}.*?\))|([\d.+-]?)(?![a-z\s#.()%])(\d?\.?\d?)?[a-z\d%]+)|(url\([/"'][a-z:/.]*['")]\))|(rgb|hsl)a?\(\d+%?,?\s?\d+%?,?\s?\d+%?(,\s?\d+\.?\d?)?\)|(#(\w|[\d]){3,8})|([\w]{3,8}(?=.*-))

Demo https://regexr.com/4a22i

ada cara sederhana lain untuk memilih elemen tertentu di css juga ...

#s1, #s2, #s3 {
    // set css attributes here
}

jika Anda hanya memiliki sedikit elemen untuk dipilih, dan tidak ingin repot dengan kelas, ini juga akan bekerja dengan mudah.