Usando espressioni regolari in CSS?

Ho una pagina html con div che hanno id (s) del modulo s1 , s2 e così via.

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

Voglio applicare una proprietà CSS a un sottoinsieme di queste sezioni / div (a seconda dell'ID). Tuttavia, ogni volta che aggiungo un div , devo aggiungere il css per la sezione separatamente in questo modo.

//css
#s1{
...
}

C'è qualcosa come le espressioni regolari in CSS che posso usare per applicare lo stile a un insieme di div .

Puoi gestire la selezione di quegli elementi senza alcuna forma di regex come mostrano le risposte precedenti, ma per rispondere direttamente alla domanda, sì, puoi utilizzare una forma di regex nei selettori:

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

Ciò significa che seleziona tutti gli elementi div all'interno del div #sections che hanno un ID che inizia con la lettera 's'.

Guarda il violino qui .

Documenti del selettore CSS W3 qui .

Come complemento di questa risposta puoi utilizzare $per ottenere le corrispondenze finali e *per ottenere corrispondenze in qualsiasi punto del nome del valore.

Partite ovunque: .col-md, .left-col, .col, .tricolor, etc.

[class*="col"]

Corrisponde al principio: .col-md, .col-sm-6, etc.

[class^="col-"]

Corrisponde alla fine: .left-col, .right-col, etc.

[class$="-col"]

Un ID ha lo scopo di identificare l'elemento in modo univoco . Anche gli stili applicati dovrebbero essere unici per quell'elemento. Se hai stili che desideri applicare a molti elementi, dovresti aggiungere una classe a tutti, piuttosto che fare affidamento su selettori di ID ...

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

e

.sec {
    ...
}

Oppure nel tuo caso specifico potresti selezionare tutte le divisioni all'interno del tuo contenitore genitore, se non c'è nient'altro al suo interno, in questo modo:

#sections > div {
    ...
}

Prima di tutto, ci sono molti, molti modi per abbinare gli elementi all'interno di un documento HTML. Inizia con questo riferimento per vedere alcuni dei selettori / modelli disponibili che puoi utilizzare per applicare una regola di stile a uno o più elementi.

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

Trova la corrispondenza con tutti divi discendenti diretti di #main.

#main > div

Trova la corrispondenza con tutti divi discendenti diretti o indiretti di #main.

#main div

Abbina il primo divche è un discendente diretto di #sections.

#main > div:first-child

Abbina a divcon un attributo specifico.

#main > div[foo="bar"]

Puoi semplicemente aggiungere una classe a ciascuno dei tuoi DIV e applicare la regola alla classe in questo modo:

HTML:

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

CSS:

//css
.myclass
{
   ...
}

Di solito lo uso *quando voglio ottenere tutte le stringhe che contengono i caratteri desiderati.

* usato in regex, sostituisce tutti i caratteri.

Usato in SASS o CSS sarebbe qualcosa di simile [id*="s"]e otterrà tutti gli elementi DOM con id "s ......".

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

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

Prova la mia espressione regolare CSS generica

(([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

c'è anche un altro modo semplice per selezionare elementi particolari in css ...

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

se hai solo pochi elementi tra cui scegliere e non vuoi perdere tempo con le lezioni, anche questo funzionerà facilmente.