2021-02-08

CSS:「指定した属性値を含む要素」を指定するセレクタ

CSS で「指定した属性値を含む要素」を指定する場合は、属性セレクタを使用します。

*（アスタリスク）を使用して次のように記述します。

要素名[属性名*="値"]

このように記述することで、「属性名」に「指定した属性値」を含む要素を指定できます。

---

*（アスタリスク）を使った属性セレクタと似たセレクタで、~（チルダ）を使った属性セレクタがあります。

要素名[属性名~="値"]

~（チルダ）を使って記述した場合は、「空白区切りの属性値の中で、指定した値を含む要素」を指定できます。

「指定した属性値を含む要素」を指定するサンプル

下の HTML は div 要素が２つあり、それぞれ 「class="sample1"」、 「class="sample2"」となっています。

文字列"sample"を含む要素を取得したい場合、CSSで記述しているように

div[class*="sample"]

とすることで「class="sample1"」、「class="sample2"」の両方の要素が取得できます。

<div class="sample1">red</div>
<div class="sample2">black</div>

<style>
    div[class*="sample"]{
        color: red;
    }
</style>

表示結果：両方の div 要素の文字色が赤になります。