Utiliser une expression régulière dans CSS?

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

...
...
...

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

 //css #s1{ ... } 

Existe-t-il quelque chose comme des expressions régulières dans 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, 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 du div #sections qui ont un identifiant commençant par la lettre ‘s’.

Voir le violon ici .

W3 CSS sélecteur docs ici .

Un identifiant 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 append une classe plutôt que de vous fier aux sélecteurs d’ID …

 
...
...
...

et

 .sec { ... } 

Ou dans votre cas particulier, vous pouvez sélectionner toutes les divisions à l’intérieur de votre conteneur parent, si rien d’autre ne s’y trouve, comme ceci:

 #sections > div { ... } 

Tout d’abord, il existe de nombreuses façons de faire correspondre les éléments dans un document HTML. La correspondance par identifiant doit être utilisée avec parcimonie.

Commencez par cette référence en premier 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/

La plupart de ces sélecteurs fonctionneront avec IE 9 et tout autre navigateur moderne; les sélecteurs importants fonctionnent dans IE 8 (les résultats varieront IE 7 et inférieurs).

Deuxièmement, à moins que vous ne deviez nommer explicitement des éléments par ID, envisagez plutôt d’utiliser un sélecteur hiérarchique. Cela rend le code beaucoup plus propre.

#sections correspondre tous les DIV qui sont des descendants directs de #sections .

 #sections > DIV 

Correspond à tous les DIV qui sont des descendants directs ou indirects de #sections .

 #sections DIV 

#sections correspondre le premier DIV qui est un descendant direct de #sections .

 #sections > DIV:first-child 

Faites correspondre un DIV avec un atsortingbut spécifique.

 #sections > DIV[foo="bar"] 

En complément de cette réponse, vous pouvez utiliser $ pour obtenir les correspondances finales et * pour obtenir des correspondances intermédiaires.

Correspond à tous les .col-md, .left-col, .col, etc.

 [class*="col-"] 

Correspond à tous les .col-md, .col-sm-6, etc.

 [class^="col-"] 

Correspond à tous les .left-col, .right-col, etc.

 [class$="-col"] 

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

HTML:

 
...
...

CSS:

 //css .myclass { ... } 

il existe un autre moyen simple de sélectionner des éléments particuliers dans CSS aussi …

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

Si vous ne disposez que de quelques éléments et que vous ne voulez pas vous soucier des cours, cela fonctionnera aussi très bien.