[attr*=value]

アトリビュートアスタリスクイコールバリュー（セレクタ）

意味属性値に特定の文字列を含む要素

[attr*=value]とは？

属性セレクタ[attr*=value]は、指定した属性(attr)の値に特定の文字列(value)を含む要素を選択するために使用します。このセレクタは、属性値のどこかに指定した文字列が存在する場合にマッチします。

[attr*=value]の具体的な使い方

特定の文字列を含むhref属性を持つリンクのスタイリング例

<style>
    a[href*='example'] {
        color: red;
    }
</style>

<a href='https://www.example.com'>Exampleサイトへのリンク</a>

href属性に'example'という文字列を含む全てのa（アンカー）要素のテキスト色を赤に設定します。例えば、'https://www.example.com'へのリンクが赤く表示されます。

[attr*=value]に関するよくある質問

Q. [attr*=value]の*の意味は？

A. *は「属性値が指定した値を含む」ことを意味します。例えば、[class*='btn']は、class属性に'btn'という文字列が含まれる要素を選択します。

Q. [attr=value]との違いは？

A. [attr=value]は完全一致を要求しますが、[attr*=value]は部分一致で十分です。例えば、[class='btn']は完全に'btn'というクラスのみを持つ要素を選択しますが、[class*='btn']は'btn-primary'などのクラスも選択します。

Q. セキュリティ上の注意点は？

A. ユーザー入力を直接セレクタに使用する場合、XSS攻撃のリスクがあります。ユーザー入力をエスケープするなど、適切な対策を取る必要があります。

[attr*=value]が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSの[attr*=value]や:nth-last-of-type()、:has()、:active、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。