¿Usando expresiones regulares en css?

Tengo una página html con divs que tienen id (s) de la forma s1 , s2 , etc.

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

Quiero aplicar una propiedad css a un subconjunto de estas secciones / divs (dependiendo de la identificación). Sin embargo, cada vez que agrego un div , tengo que agregar el CSS para la sección por separado de esta manera.

//css
#s1{
...
}

¿Hay algo como expresiones regulares en css que pueda usar para aplicar estilo a un conjunto de divs ?

Puede administrar la selección de esos elementos sin ninguna forma de expresión regular como muestran las respuestas anteriores, pero para responder la pregunta directamente, sí, puede usar una forma de expresión regular en los selectores:

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

Eso dice que seleccione cualquier elemento div dentro de las #secciones div que tengan una ID que comience con la letra 's'.

Ver violín aquí .

W3 CSS selector de documentos aquí .

Como complemento de esta respuesta , puede usar $para obtener las coincidencias finales y *obtener coincidencias en cualquier parte del nombre del valor.

Partidos en cualquier lugar: .col-md, .left-col, .col, .tricolor, etc.

[class*="col"]

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

[class^="col-"]

Partidos en la final: .left-col, .right-col, etc.

[class$="-col"]

Una identificación está destinada a identificar el elemento de manera única . Cualquier estilo aplicado también debería ser exclusivo de ese elemento. Si tiene estilos que desea aplicar a muchos elementos, debe agregar una clase a todos ellos, en lugar de confiar en los selectores de ID ...

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

y

.sec {
    ...
}

O, en su caso específico, puede seleccionar todas las divisiones dentro de su contenedor principal, si no hay nada más dentro, así:

#sections > div {
    ...
}

En primer lugar, hay muchas, muchas formas de hacer coincidir elementos dentro de un documento HTML. Comience con esta referencia para ver algunos de los selectores / patrones disponibles que puede usar para aplicar una regla de estilo a un elemento (s).

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

Une todos los divs que son descendientes directos de #main.

#main > div

Une todos los divs que son descendientes directos o indirectos de #main.

#main div

Empareja el primero divque es un descendiente directo de #sections.

#main > div:first-child

Haga coincidir a divcon un atributo específico.

#main > div[foo="bar"]

Puede 'simplemente agregar una clase a cada uno de sus DIV y aplicar la regla a la clase de esta manera:

HTML:

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

CSS:

//css
.myclass
{
   ...
}

Usualmente uso *cuando quiero obtener todas las cadenas que contienen los caracteres deseados.

* usado en expresiones regulares, reemplaza todos los caracteres.

El uso en SASS o CSS sería algo así [id*="s"]y obtendrá todos los elementos DOM con la identificación "s ......".

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

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

Pruebe mi expresión regular CSS genérica

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

También hay otra manera simple de seleccionar elementos particulares en CSS ...

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

Si solo tiene unos pocos elementos para elegir y no quiere molestarse con las clases, esto también funcionará fácilmente.