Asked  7 Months ago    Answers:  5   Viewed   38 times

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.

 Answers

82

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;  
}

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.

Tuesday, June 1, 2021
 
Viralk
answered 7 Months ago
77

Have a look at http://www.w3.org/TR/CSS21/grammar.html#scanner

According to this grammar and the post Which characters are valid in CSS class names/selectors? this should be the right pattern to scan for css classes:

.-?[_a-zA-Z]+[_a-zA-Z0-9-]*s*{

Note: Tag names are not required as prefix for classes in css. Just .hello { border: 1; } is also valid.

Thursday, August 12, 2021
 
liquidmotion
answered 4 Months ago
100

=~ succeeds if the string on the left contains a match for the regex on the right. If you want to know if the string matches the regex, you need to "anchor" the regex on both sides, like this:

regex='^[0-9][0-9][_][0-9][0-9][_][0-9][0-9]$'
if [[ $incoming_string =~ $regex ]]
then
  # Do awesome stuff here
fi

The ^ only succeeds at the beginning of the string, and the $ only succeeds at the end.

Notes:

  1. I removed the unnecessary () from the regex and "" from the [[ ... ]].
  2. The bash manual is poorly worded, since it says that =~ succeeds if the string matches.
Wednesday, September 8, 2021
 
user2999861
answered 3 Months ago
95

Since a hex color code may also consist of 3 characters, you can define a mandatory group and an optional group of letters and digits, so the long and elaborate notation would be:

/#([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?b/

Or if you want a nice and short version, you can say that you want either 1 or 2 groups of 3 alphanumeric characters, and that they should be matched case insensitively (/i).

/#([a-f0-9]{3}){1,2}b/i

Instead of [a-f0-9] you can also write [[:xdigit:]], if the regex engine supports this posix character class. In this case you can skip the /i at the end, and the whole formula is only two characters more, but arguably more descriptive.

/#([[:xdigit:]]{3}){1,2}b/
Thursday, September 9, 2021
 
Jeremy Pare
answered 3 Months ago
74

You can use:

re.sub('[a-zA-Z]d,', lambda x: x.group(0)[0] + '0' + x.group(0)[1:], s)
Tuesday, November 9, 2021
 
Codex
answered 4 Weeks ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share