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?

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

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

Solution

Problem