CSS 参考マニュアル

CSS @ルール(RULES)

CSS属性全書

CSS関数（Functions）CSS選択器全書

CSS [attribute~=value] 選択子

attributeという名前の属性を持つ要素を示し、その属性はスペースで区切られた値リストであり、[少なくとも]1つの値が"value"と一致する。

完全なCSS選択子リファレンスマニュアル

オンラインサンプル

タイトル属性に"flower"という単語を含むすべての要素を選択する例

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>基本チュートリアル(oldtoolbag.com)</title>　
<style>
[title~=flower]
{
　　　　border:5px solid red;
}
</style>
</head>
<body>
<p>画像のtitle属性に"flower"という単語が含まれている場合、赤い枠に設定されます。</p>
<img src="klematis.jpg" title="klematis flower" width="150" height="113"　/>
<img src="img_flwr.gif" title="flowers" width="224" height="162"　/>
<img src="landscape.jpg" title="landscape" width="160" height="120"　/>
<p><b>注意:</b>もし[i]attribute<b>/i>〜=<i>value</i>]IE8　およびそれ以前のバージョンでは、DOCTYPEは宣言する必要があります。</p>
</body>
</html>

テストして見て‹/›

定義と使用法

[attribute〜=value]選択子は、属性値に指定された単語を含む要素を選択するために使用されます。

ブラウザ互換性

IEFirefoxOperaChromeSafari

すべての主要ブラウザが[attribute〜=value]選択子。

注意:[attribute〜=value]IE8中で実行するには、宣言する必要があります <!DOCTYPE>.

CSS チュートリアル: CSS 属性選択子