（JavaScriptではなく）文字列で始まるIDを選択するCSSを取得する方法？

Question

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

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

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

Javascriptを使用してこれを正確に行う回答を見てきましたが、CSSのみでそれを行う方法はありますか？

Answer 1

[id^=product]

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

シンボルは実際にはRegex構文から借用されます。ここで、^と$はそれぞれ「文字列の開始」と「文字列の終了」を意味します。

詳細については、 仕様 を参照してください。

Answer 2

私はこのようにします：

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

理想的には、クラスを使用します。これがクラスの目的です。

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

そして、セレクターは次のようになります。

.product {
  ...
}

Answer 3

属性セレクター を使用します

[id^=product]{property:value}

Answer 4

同じことを行う別のCSSセレクターがあることに気付きました。構文は次のとおりです。

[id|="name_id"]

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