guptron guptron - 2 months ago 7
CSS Question

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

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?

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