How can I apply CSS selector for multiple divs like block-11, block-12 etc?

Question

I've multiple block IDs as follows:

<div id="block-11">content Here</div>
<div id="block-12">content Here</div>
<div id="block-13">content Here</div>
<div id="block-14">content Here</div>
<div id="block-15">content Here</div>

Is it possible to use #block-[n] like this for styling my those block?

I think this may fulfill your needs: https://www.w3schools.com/cssref/css_selectors.asp — namln-hust, May 15 '22 at 15:06
You can use regex to select all elements with `id` that starts with *block* using `div[id^='block'] { property: value; }` — Geeky Quentin, May 15 '22 at 15:14
Do you also want to check if the value that ends with is a number or not? — Geeky Quentin, May 15 '22 at 15:14

score 1 · Answer 1 · answered May 15 '22 at 15:40

1

See MDN

[attr^=value] Represents elements with an attribute name of attr whose value is prefixed (preceded) by value

div[id^=block-] {
  background: pink;
}

<div id="block-11">content Here</div>
<div id="block-12">content Here</div>
<div id="block-13">content Here</div>
<div id="block-14">content Here</div>
<div id="block-15">content Here</div>

answered May 15 '22 at 15:40

A Haworth

30,908
4
11
14

It might - for completeness' sake - be worth explaining the difference between `[attr^=value]` and `[attr*=value]`, just in case multiple classes are used. – David Thomas May 15 '22 at 15:43

How can I apply CSS selector for multiple divs like block-11, block-12 etc?

1 Answers1