How to get CSS to select ID that begins with a string (not in Javascript)?

Question

If the HTML has elements like this:

id="product42"
id="product43"
...

How do I match all of those id's starting with "product"?

I've seen answers that do this exactly using javascript, but how to do it with only CSS?

Niet the Dark Absol · Accepted Answer · 2015-06-30T11:53:45.763

496

[id^=product]

^= indicates "starts with". Conversely, $= indicates "ends with".

The symbols are actually borrowed from Regex syntax, where ^ and $ mean "start of string" and "end of string" respectively.

See the specs for full information.

edited Jun 30 '15 at 11:53

answered Jul 15 '12 at 23:58

Niet the Dark Absol

320,036
81
464
592

1

Thanks for the method and explanation, I've edited my question so its more clear. Out of curiosity, is there a way to match a string inside of the id's string? – abc123 Jul 16 '12 at 14:12
See [the specs](http://www.w3.org/TR/css3-selectors/#attribute-substrings), they explain it better than I could! – Niet the Dark Absol Jul 16 '12 at 14:41
@itamar: I appreciate your attempt at editing my answer, but quote are only required if the value contains characters that are not a valid identifier. `product` is clearly a valid identifier, and therefore needs no quotes. – Niet the Dark Absol Sep 06 '13 at 23:18
The specificity of this type of selector is very low – nuander Sep 03 '15 at 21:24
How about "does not start with" and "does not end with"? – emeraldhieu Sep 07 '15 at 09:12
4

@Emerald214 `:not([id^=product])` – Niet the Dark Absol Sep 07 '15 at 16:17

Blender · Answer 2 · 2012-07-16T01:20:38.037

86

I'd do it like this:

[id^="product"] {
  ...
}

Ideally, use a class. This is what classes are for:

<div id="product176" class="product"></div>
<div id="product177" class="product"></div>
<div id="product178" class="product"></div>

And now the selector becomes:

.product {
  ...
}

edited Jul 16 '12 at 01:20

answered Jul 15 '12 at 23:58

Blender

289,723
53
439
496

1

@Blender, thanks, I chose the other answer because it explains a bit more to me and understand the symbols being used. I can't use classes for this scenario, otherwise, yes it would be nicer. – abc123 Jul 16 '12 at 14:14

score 8 · Answer 3 · answered Jul 15 '12 at 23:58

8

Use the attribute selector

[id^=product]{property:value}

answered Jul 15 '12 at 23:58

Musa

96,336
17
118
137

score 4 · Answer 4 · answered Apr 26 '21 at 11:30

I want to share this solution too, maybe in the future it could help someone.
As the others said you can write [id^=product] for id

But we can give an example for the class as well: [class^="product-"] which indicates classes starts with product and also * like this [class*="product-"]

This is a simple example :

/* Icons */
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'mk-font' !important;
  font-size: 3em;
}

good luck ...

score 0 · Answer 5 · answered Sep 15 '16 at 10:55

0

I noticed that there is another CSS selector that does the same thing . The syntax is as follows :

[id|="name_id"]

This will select all elements ID which begins with the word enclosed in double quotes.

answered Sep 15 '16 at 10:55

Luigi Spezia

43
9

How did you notice? reference? – Ben Bozorg Aug 25 '17 at 01:16
Doc for this here : https://www.w3.org/TR/selectors-3/#attribute-selectors This should select all id which start or equal to "name_id" – Dessauges Antoine Apr 11 '19 at 06:22
`att|=val` is NOT the same as `att^=val`. From the reference mentioned : The `|=` selector "Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" **immediately followed by "-"**. " So an id like "product42" would not be matched by `|=`, but "product-42" would. – Goozak Jan 10 '20 at 15:36

How to get CSS to select ID that begins with a string (not in Javascript)?

5 Answers5

Linked

Related