Using Regular Expression in Css

Using regular expression in css?

You can manage selecting those elements without any form of regex as the previous answers show, but to answer the question directly, yes you can use a form of regex in selectors:

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

<div id="sections">
  <div id="s1">one</div>
  <div id="s2">two</div>
  <div id="s3">three</div>
  <div id="t1">four</div>
</div>

Css with regex for id

You can use special CSS selector for that: id$='0' means id ends with 0 and id^='s' means id begins with s.

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

<div id="sections"><div id="s10">one</div><div id="s2">two</div><div id="s30">three</div><div id="t1">four</div></div>

CSS selector regex anything in between

You could use the ^= ('starts with') and $= ('ends with') attribute selectors.

[class^="dh-"][class$="-bl"]{}

CSS regex selector match one OR another condition?

You'll need to use two separate selectors with the same rule. CSS selectors don't really support alternation.

[class^='icon-'], [class*=' icon-'] {
  /* ... */
}

div {  color: red;}
[class^='icon-'], [class*=' icon-'] {  color: green;}

<div class='icon-something another-class'>should match</div><div class='another-class icon-something'>should match</div><div class='another-icon-class another-class'>should not match</div>

Possible to use regular expressions in Less?

You don't need to use Less with regular expressions for this one. It is possible to do with pure CSS itself by using attribute selectors like in the below example.

[class^='col-'],[class*=' col-'] {  outline: 2px dotted red;}div {  margin: 10px;}

<div class='col-md-11'>Something</div><div class='col-md-12'>Something</div><div class='col-md-21'>Something</div><div class='column-md-11'>Something</div><div class='some-class col-md-99'>Something</div>

Regular Expression in CSS - Stylesheets

Firstly, you're misinterpreting the spec. You can't use patterns like that. You can do things like

*[attr*="string"]

and it will match any element which has an attribute attr with string somewhere in the value. However, the first * just means "any element" here, and the second * means "substring anywhere in the value". There's no actual regular expression pattern matching going on, so the matched value would always be string in this case.

And secondly, no, you can't do any kind of substitution like that in CSS. If you want to do that kind of thing you might want to look into something like LESS, Sass or Stylus.

How to write regular expressions in CSS

There is no way to match elements with a regular expression, even in CSS3. Your best option is probably to simply use a class for your divs.

<style>
.s-div {
    // stuff specific to each div
}
</style>

<div id="s1" class="s-div"><!-- stuff --></div>
<div id="s2" class="s-div"><!-- stuff --></div>
<div id="s3" class="s-div"><!-- stuff --></div>
<div id="s4" class="s-div"><!-- stuff --></div>
<div id="s5" class="s-div"><!-- stuff --></div>

Also remember that you can separate multiple class names by a space inside a class attribute.

<div class="class1 class2 class3"></div>

Using Regular Expression in Css