CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS ファンクション（Functions）CSS セレクタ全書

CSS3 [attribute*=value]選択子

attributeと名付けられた属性で、属性値に"value"を含む要素を示します。

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

オンラインサンプル

存在するhref属性で属性値が"example"を含む<a>要素、以下のように選択：

例

<!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8">
<title>基本チュートリアル(oldtoolbag.com)</title>
<style>
/*　存在するhref属性で属性値が"example"を含む<a>要素、以下のように選択　*/
a[href*="example"]　{
　　font-size:　2em;
}
</style>
</head>
<body>
<div>
<ul>
　　<li><a href="#internal">Internal リンク</a></li>
　　<li><a href="http://example.com">Example リンク</a></li>
　　<li><a href="#InSensitive">Insensitive 内部リンク</a></li>
　　<li><a href="http://example.org">Example org リンク</a></li>
</ul>
</div>
</body>
</html>

テストして見て‹/›

定義と使用法

[attribute*=value]選択子は、属性値に指定された値を含む要素をマッチングします。

ブラウザの互換性

IEFirefoxOperaChromeSafari

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

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

オンラインサンプル

class属性値が"test"を含むすべての要素の背景色を設定します：

例

<!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8">　
<title>基本チュートリアル(oldtoolbag.com)</title>　
<style>　
[class*="test"]
{
background:#ffff00;
}
</style>
</head>
<body>
<div class="first_test">第1個のDIV要素.</div>
<div class="second">第2個のDIV要素.</div>
<div class="test">第3個のDIV要素.</div>
<p class="test">これは普通のテキストパラグラフ.</p>
</body>
</html>

テストして見て‹/›

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

CSS ファンクション（Functions）CSS セレクタ全書