Using regular expression in css?

Question

I have an html page with divs that have id(s) of the form s1, s2 and so on.

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

I want to apply a css property to a subset of these sections/divs (depending upon the id). However, every time I add a div, I have to add the css for the section separately like this.

//css
#s1{
...
}

Is there something like regular expressions in css that I can use to apply style to a set of divs.

• Lee Goddard: You should probably be using the class attribute to identify the class of elements with those IDs
• Andrew: Related: stackoverflow.com/a/38711853/1599699

Answer 1

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>

That says select any div elements inside the #sections div that have an ID starting with the letter 's'.

See fiddle here.

W3 CSS selector docs here.

• Mike S: This was in a recommendation for CSS 2.1; it is supported by IE 7, Opera 9 etc.. Source: developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
• DGoiko: you just made my day. I was looking to include some advanced css selectors in a crawler to make it user-configurable. that ^= was like water in the f****** desert.
• Erhannis: From this: developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors , it's not really regex, but rather, a plain match at the beginning of the id.

Answer 2

As complement of this answer you can use $ to get the end matches and * to get matches anywhere in the value name.

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

[class*="col"]

Matches at the beginning: .col-md, .col-sm-6, etc.

[class^="col-"]

Matches at the ending: .left-col, .right-col, etc.

[class$="-col"]

• user7075574: (I know this sounds crazy but) Is it possible to do "destruct" with each match?
• Faizanur Rahman: is this support complete regex feature like grouping ?

Answer 3

An ID is meant to identify the element uniquely. Any styles applied to it should also be unique to that element. If you have styles you want to apply to many elements, you should add a class to them all, rather than relying on ID selectors...

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

and

.sec {
 ...
}

Or in your specific case you could select all divisions inside your parent container, if nothing else is inside it, like so:

#sections > div {
 ...
}

Answer 4

First of all, there are many, many ways of matching items within a HTML document. Start with this reference to see some of the available selectors/patterns which you can use to apply a style rule to an element(s).

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

Match all divs which are direct descendants of #main.

#main > div

Match all divs which are direct or indirect descendants of #main.

#main div

Match the first div which is a direct descendant of #sections.

#main > div:first-child

Match a div with a specific attribute.

#main > div[foo="bar"]

Answer 5

You can' just add a class to each of your DIVs and apply the rule to the class in this way:

HTML:

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

CSS:

//css
.myclass
{
 ...
}

• prodigitalson: Also as a general rule i try not to style things with ID selectors at all. It tweaks the specificity so they are harder to override which usually hurts more than it helps in my experience. I use id's... just not for applying css.
• prodigitalson: I was jsut saying that i try to avoid using id selectors because then if you go to override the style later (lets say for a specific page) then you end up having to use that same selector + whatever else you can use to make it more specific than the original selector. Not bad if it just .thepage #someid but it can get really long winded on advanced table or list styling. It wasnt an criticism of your answer so much as it was general advice expanding on your answer :-)

Answer 6

I usually use * when I want to get all the strings that contain the wanted characters.

* used in regex, replaces all characters.

Used in SASS or CSS would be something like [id*="s"] and it will get all DOM elements with id "s......".

/* add red color to all div with id s .... elements */
div[id^="s"] {
 color: red;
}