属性セレクタ
属性を使った指定では、属性名や属性値によってスタイルの適用対象を指定することができます。
この属性セレクタには、次の4つの指定方法があります。
| 属性セレクタ | 説明 |
|---|---|
[属性名] |
属性名が一致する要素に適用される |
[属性名="属性値"] |
属性名と属性値が一致する要素に適用される |
[属性名~="属性値"] |
属性名と属性値が一致する要素に適用される （スペースで区切られた複数の属性値に対応） |
[属性名|="属性値"] |
属性名と属性値が一致する要素に適用される （ハイフンで区切られた属性値に対応） |
- 上記の指定は、IE 6以下では対応していません。IE 7からは対応していますが、表示モードが互換モードの場合は機能しないようです。
指定方法
要素名に続けて [ ] を記述して、その中で属性名や属性値を指定します。
span[title] { border-bottom: 1px #c0c0c0 dashed; }
上記の例では、title属性が指定されたspan要素にのみ、スタイルが適用されることになります。
また、次のように複数の属性セレクタを指定することもできます。
a[href][title] { background-color: #e0e0e0; }
上記の例では、href属性とtitle属性が指定されたa要素にのみ、スタイルが適用されることになります。
[属性名] の使用例
要素名[属性名] で指定すると、そのタイプの要素のうち、指定した属性を持つ要素にのみスタイルが適用されます。
cite[title] {
border-bottom: 1px #c0c0c0 dashed;
}
次の例では、title属性が指定されたcite要素にのみ、スタイルが適用されることになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
p {
line-height: 140%;
}
cite[title] {
border-bottom: 1px #c0c0c0 dashed;
}
</style>
</head>
<body>
<p><cite title="http://www.tagindex.com/">TAG index</cite>からの引用です。</p>
<p><cite>TAG index</cite>からの引用です。</p>
</body>
</html>
[属性名="属性値"] の使用例
要素名[属性名="属性値"] で指定すると、そのタイプの要素のうち、指定した属性と属性値を持つ要素にのみスタイルが適用されます。
input[type="submit"] {
font-weight: bold;
color: red;
}
次の例では、type属性の値に submit が指定されたinput要素（送信ボタン）にのみ、スタイルが適用されることになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
input[type="submit"] {
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<form method="post" action="example.cgi">
<p><input type="text" name="example" size="30"></p>
<p>
<input type="submit" value="送信する">
<input type="reset" value="リセット">
</p>
</form>
</body>
</html>
[属性名~="属性値"] の使用例
要素名[属性名~="属性値"] で指定すると、そのタイプの要素のうち、指定した属性と属性値を持つ要素にのみスタイルが適用されます。
この指定では、スペースで区切られた複数の属性値に対応しています。複数の値の中から一致する値が見つかれば、その要素にスタイルが適用されます。
a[rel~="contents"] {
color: red;
}
次の例では、rel属性の値に contents が指定されたa要素にのみ、スタイルが適用されることになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
a[rel~="contents"] {
color: red;
}
</style>
</head>
<body>
<ul>
<li><a href="../index.html" rel="contents">このリンクテキストに適用されます</a></li>
<li><a href="../index.html" rel="next contents">このリンクテキストに適用されます</a></li>
<li><a href="../index.html" rel="next">このリンクテキストには適用されません</a></li>
</ul>
</body>
</html>
[属性名|="属性値"] の使用例
要素名[属性名|="属性値"] で指定すると、そのタイプの要素のうち、指定した属性と属性値を持つ要素にのみスタイルが適用されます。
この指定では、ハイフン（ - ）で区切られた属性値に対応しています。ハイフンより前の文字列に一致すれば、その要素にスタイルが適用されます。
例えば、en-US や en-GB といった属性値では、en の部分が一致の対象となります。
p[lang|="en"] {
color: red;
}
次の例では、lang属性の値に en が指定されたp要素にのみ、スタイルが適用されることになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
p[lang|="en"] {
color: red;
}
</style>
</head>
<body>
<p lang="en">The style is applied to this text</p>
<p lang="en-US">The style is applied to this text</p>
<p lang="en-GB">The style is applied to this text</p>
<p lang="ja">このテキストには適用されません</p>
</body>
</html>