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

Solution 1:

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

Solution 2:

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

Solution 3:

Use the attribute selector

[id^=product]{property:value}

Solution 4:

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