【属性セレクタE[foo~="bar"]】属性値候補と一致した場合適用

要素名[属性名~="属性値"]の形式の属性セレクタでは、指定した属性値の候補と一致した場合にスタイルが適用されます。 例えばある要素の属性値が半角スペースで区切られ複数あり、そのうちの1つが「属性名」で指定した値と一致した場合に、その要素に対してスタイルを適用します。

下記の例では、class属性の値(属性値)を半角スペースで区切り複数指定(sample1とsample2)しています。

<p class="sample1 sample2">.....</p>

この場合下記のように指定すると、class属性の値にsample1が含まれているp要素に対してスタイルが適用されます。

p[class~="sample1"]{color: red;}

このように要素名[属性名~="属性値"]の形式の属性セレクタ(E[foo~="bar"])では、属性と属性値の両方を指定していますが、属性値は全体が完全に一致する必要性はなく、HTML文書内で指定している半角スペースで区切った複数の値の中の1つと一致するだけでスタイルが適用されます。

書式

  • 要素名[属性名~="属性値"] {プロパティ名:値;} ……… 属性値候補と一致した場合に適用する

使用した時の例

p[class~="sample1"] {color: red;}
p[class~="sample2"] {font-weight: bold;}
p[class~="sample3"][class~="sample1"] {text-decoration: underline;}
<p class="sample1">テキストが赤色になります</p>
<p class="sample1 sample2">テキストが赤色で太字になります</p>
<p class="sample1 sample3 sample44">テキストが赤色で下線が引かれます</p>

ブラウザ上の表示例

テキストが赤色になります

テキストが赤色で太字になります

テキストが赤色で下線が引かれます

対応ブラウザなどのデータ

適用対象 属性値候補と一致した要素
対応ブラウザ Internet Explorer , Google Chrome , Firefox , Opera , Safari

関連情報