Vous utilisez une expression régulière en CSS?

J'ai une page html avec des divs qui ont des identifiants de la forme s1 , s2 et ainsi de suite.

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

Je veux appliquer une propriété css à un sous-ensemble de ces sections / divs (en fonction de l'id). Cependant, chaque fois que j'ajoute un div , je dois ajouter le css pour la section séparément comme ceci.

//css
#s1{
...
}

Y a-t-il quelque chose comme des expressions régulières en css que je peux utiliser pour appliquer un style à un ensemble de divs .

Vous pouvez gérer la sélection de ces éléments sans aucune forme d'expression régulière comme le montrent les réponses précédentes, mais pour répondre directement à la question, oui, vous pouvez utiliser une forme d'expression régulière dans les sélecteurs:

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

Cela dit, sélectionnez tous les éléments div à l'intérieur des #sections div qui ont un ID commençant par la lettre «s».

Voir violon ici .

La documentation du sélecteur CSS W3 ici .

En complément de cette réponse, vous pouvez utiliser $pour obtenir les correspondances de fin et *pour obtenir des correspondances n'importe où dans le nom de valeur.

Matches partout: .col-md, .left-col, .col, .tricolor, etc.

[class*="col"]

Matches au début: .col-md, .col-sm-6, etc.

[class^="col-"]

Matches à la fin: .left-col, .right-col, etc.

[class$="-col"]

Un ID est destiné à identifier l'élément de manière unique . Tous les styles qui lui sont appliqués doivent également être uniques à cet élément. Si vous souhaitez appliquer des styles à de nombreux éléments, vous devez leur ajouter une classe à tous, plutôt que de vous fier aux sélecteurs d'ID ...

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

et

.sec {
    ...
}

Ou dans votre cas spécifique, vous pouvez sélectionner toutes les divisions à l'intérieur de votre conteneur parent, si rien d'autre n'est à l'intérieur, comme ceci:

#sections > div {
    ...
}

Tout d'abord, il existe de très nombreuses façons de faire correspondre des éléments dans un document HTML. Commencez par cette référence pour voir certains des sélecteurs / modèles disponibles que vous pouvez utiliser pour appliquer une règle de style à un ou plusieurs éléments.

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

Correspond à tous les divs qui sont des descendants directs de #main.

#main > div

Correspond à tous les divs qui sont des descendants directs ou indirects de #main.

#main div

Correspond au premier divqui est un descendant direct de #sections.

#main > div:first-child

Faites correspondre un divavec un attribut spécifique.

#main > div[foo="bar"]

Vous pouvez simplement ajouter une classe à chacun de vos DIV et appliquer la règle à la classe de cette manière:

HTML:

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

CSS:

//css
.myclass
{
   ...
}

J'utilise généralement *lorsque je veux obtenir toutes les chaînes contenant les caractères voulus.

* utilisé dans regex, remplace tous les caractères.

Utilisé dans SASS ou CSS serait quelque chose comme [id*="s"]et il obtiendra tous les éléments DOM avec les id "s ......".

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

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

Essayez mon expression régulière CSS générique

(([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}(?=.*-))

Démo https://regexr.com/4a22i

il existe également un autre moyen simple de sélectionner des éléments particuliers en css ...

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

si vous n'avez que quelques éléments à choisir et que vous ne voulez pas vous embêter avec les classes, cela fonctionnera facilement aussi.