Как заставить CSS выбрать идентификатор, начинающийся со строки (не в Javascript)?

Если HTML имеет такие элементы:

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

Как мне сопоставить все эти id, начинающиеся с "product"?

Я видел ответы, которые делают это именно с помощью javascript, но как это сделать только с CSS?

[id^=product]

^= указывает, что "начинается с". И наоборот, $= указывает "заканчивается на".

Символы фактически заимствованы из синтаксиса Regex, где ^ и $ означают "начало строки" и "конец строки" соответственно.

См. спецификации для полной информации.

Я бы сделал это вот так:

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

В идеале используйте класс. Это классы для:

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

И теперь селектор становится:

.product {
  ...
}

[id^=product]{property:value}

Я заметил, что есть другой селектор CSS, который делает то же самое. Синтаксис выглядит следующим образом:

[id|="name_id"]

Здесь будет выбран идентификатор всех элементов, который начинается со слова, заключенного в двойные кавычки.