（JavaScriptではなく）文字列で始まるIDをCSSに選択させる方法は？

HTMLに次のような要素がある場合：

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

「product」で始まるすべてのIDをどのように一致させますか？

javascriptを使用してこれを正確に行う回答を見てきましたが、CSSだけでそれを行う方法は？

[id^=product]

^=「で始まる」を示します。逆に、$=「で終わる」を示します。

シンボルは実際には正規表現構文から借用され^、$「と」はそれぞれ「文字列の始まり」と「文字列の終わり」を意味します。

詳細については、仕様をご覧ください。

私はこのようにします：

[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"]

これにより、二重引用符で囲まれた単語で始まるすべての要素IDが選択されます。