Usando expressão regular em css?

Eu tenho uma página html com divs que têm id (s) do formulário s1 , s2 e assim por diante.

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

Eu quero aplicar uma propriedade css a um subconjunto dessas seções / divs (dependendo do id). No entanto, toda vez que adiciono uma div , tenho que adicionar o css para a seção separadamente dessa maneira.

//css
#s1{
...
}

Existe algo como expressões regulares em css que eu possa usar para aplicar estilo a um conjunto de divs .

Você pode gerenciar a seleção desses elementos sem nenhuma forma de regex, como mostram as respostas anteriores, mas para responder diretamente à pergunta, sim, você pode usar uma forma de regex nos seletores:

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

Dito isto, selecione qualquer elemento div dentro da #sections div que tenha um ID começando com a letra 's'.

Veja violino aqui .

O seletor de CSS do W3 documenta aqui .

Como complemento desta resposta, você pode usar $para obter as correspondências finais e *obter correspondências em qualquer lugar do nome do valor.

Jogos em qualquer lugar: .col-md, .left-col, .col, .tricolor, etc.

[class*="col"]

Jogos no início: .col-md, .col-sm-6, etc.

[class^="col-"]

Corresponde à final: .left-col, .right-col, etc.

[class$="-col"]

Um ID destina-se a identificar o elemento exclusivamente . Quaisquer estilos aplicados a ele também devem ser exclusivos para esse elemento. Se você possui estilos que deseja aplicar a muitos elementos, adicione uma classe a todos eles, em vez de confiar nos seletores de ID ...

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

e

.sec {
    ...
}

Ou, no seu caso específico, você pode selecionar todas as divisões dentro do contêiner pai, se não houver mais nada dentro dele, da seguinte forma:

#sections > div {
    ...
}

Primeiro de tudo, existem muitas, muitas maneiras de combinar itens em um documento HTML. Comece com esta referência para ver alguns dos seletores / padrões disponíveis que você pode usar para aplicar uma regra de estilo a um (s) elemento (s).

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

Combine todos os divs que são descendentes diretos de #main.

#main > div

Combine todos os divs que são descendentes diretos ou indiretos de #main.

#main div

Combine o primeiro, divque é um descendente direto de #sections.

#main > div:first-child

Combine a divcom um atributo específico.

#main > div[foo="bar"]

Você pode 'simplesmente adicionar uma classe a cada um dos seus DIVs e aplicar a regra à classe desta maneira:

HTML:

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

CSS:

//css
.myclass
{
   ...
}

Eu costumo usar *quando quero obter todas as seqüências que contêm os caracteres desejados.

* usado no regex, substitui todos os caracteres.

Usado no SASS ou CSS seria algo parecido [id*="s"]e obterá todos os elementos DOM com o ID "s ......".

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

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

Experimente minha expressão 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

existe outra maneira simples de selecionar elementos específicos em css também ...

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

se você tiver apenas alguns elementos para escolher e não quiser se preocupar com as aulas, isso também será fácil.