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

スポンサーリンク

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

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

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

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


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

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

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

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

下の HTML は div 要素が2つあり、それぞれ 「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 要素の文字色が赤になります。

red
black

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト