Question

How do I use regular expressions in CSS? I found a tutorial here for matching static strings in CSS, but I haven’t been able to find one for using regular expressions to match multiple strings in CSS. (I found one here, but I couldn’t get it to work. I also looked at the W3C documentation on using regular expressions, but I couldn’t make sense of the document.)

I’m want to match a series of <DIV> tags whose ids start at s1 and increase by one (ie. #s1 #s2 #s3…).

I know that div[id^=s], div[id^='s'], and div[id^='s'] each perform the match as I intend it in my CSS. However, each of those also match an id of #section, which I don’t want to happen. I believe that "/^s([0-9])+$/" is the equivalent PHP string–I’m just looking for it in CSS version.

Answer 1

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>