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-30 11:53:45Z

539

[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, 2015 at 11:53

answered Jul 15, 2012 at 23:58

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

abc123 Over a year ago

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?

Niet the Dark Absol Over a year ago

See the specs, they explain it better than I could!

Niet the Dark Absol Over a year ago

@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.

nuander Over a year ago

The specificity of this type of selector is very low

Niet the Dark Absol Over a year ago

@Emerald214 :not([id^=product])

|

Blender · Accepted Answer · 2012-07-16 01:20:38Z

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 { ... }

@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.

Musa · Accepted Answer · 2012-07-15 23:58:25Z

8

Use the attribute selector

[id^=product]{property:value}

answered Jul 15, 2012 at 23:58

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Comments

Freeman · Accepted Answer · 2021-04-26 11:30:47Z

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 ...

Luigi Spezia · Accepted Answer · 2016-09-15 10:55:54Z

1

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, 2016 at 10:55

Luigi Spezia

539 bronze badges

3 Comments

Ben Bozorg Over a year ago

How did you notice? reference?

Dessauges Antoine Over a year ago

Doc for this here : w3.org/TR/selectors-3/#attribute-selectors This should select all id which start or equal to "name_id"

Goozak Over a year ago

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.

Collectives™ on Stack Overflow

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

5 Answers 5

6 Comments

1 Comment

Comments

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

1 Comment

Comments

Comments

3 Comments

Linked

Related