css - CSSで[x*="y"]と[x^= "y"]はどういう意味ですか？

Question

cssでクラスを作成する際の*と^の意味は何でしょうか。

例えば：

[class*="sample-"]

と

[class^="sample-"]

Answer 1

*=クラス属性のどこかにテキスト「sample-」が存在するすべての要素を検索することを意味します。例えば：

<style>
    [class*="sample-"] {}
</style>

<p class="asdsadsample-adas">Matches</p>
<p class="smple-">Doesn't match</p>

^=これは、クラス属性がテキスト「sample-」で始まるすべての要素を検索することを意味します。例えば

<style>
    [class^="sample-"] {}
</style>

<p class="sample-blah">Matches</p>
<p class="ssample-blah">Doesn't match</p>