属性セレクタ

概要

属性セレクタは、与えられた属性や属性値の有無を使用して要素を選択します。

[attr]
attr という名前の属性を持つ要素を表します。
[attr=value]
attr という名前の、値が正確に "value" である属性を持つ要素を表します。
[attr~=value]
attr という名前の、値がスペースで区切られた項目リストであり、うち 1 つが正確に "value" である属性を持つ要素を表します。
[attr|=value]
attr という名前の、値がハイフンで区切られた項目であり、うち 1 つが正確に "value" である属性を持つ要素を表します。言語のサブコードのマッチに使用することができます。
[attr^=value]
attr という名前の、 "value" で始まる値を持つ要素を表します。
[attr$=value]
attr という名前の、 "value" で終わる値を持つ要素を表します。
[attr*=value]
attr という名前の、値に部分文字列として "value" という文字列が少なくても 1 つ存在する属性を表します。

<style type="text/css">
    /* すべての "lang" 属性を持つ span 要素を bold にします。 */
    span[lang] {font-weight:bold;}
 
    /* すべてのポルトガル語の span 要素を green にします。 */
    span[lang="pt"] {color:green;}

    /* すべてのアメリカ英語の span 要素を blue にします。  */
    span[lang~="en-us"] {color: blue;}

    /* 簡体(zh-CN)あるいは繁体(zh-TW)にマッチし、中国語であるどの span 要素も red にします。 */
    span[lang|="zh"] {color: red;}

    /* すべての内部リンクが gold の背景を持ちます。 */
    a[href^="#"] {background-color:gold}

    /* ".cn" で終わっている URL へのすべてのリンクを red にします。 */
    a[href$=".cn"] {color: red;}

    /* URL に "example" を持つすべてのリンクの背景を灰色にします。 */
    a[href*="example"] {background-color: #CCCCCC;}
</style>

これを、

<div class="hello-example">
    <a href="http://example.com">英語:</a>
    <span lang="en-us en-gb en-au en-nz">Hello World!</span>
</div>
<div class="hello-example">
    <a href="#portuguese">ポルトガル語:</a>
    <span lang="pt">Olá Mundo!</span>
</div>
<div class="hello-example">
    <a href="http://example.cn">中国語(簡体):</a>
    <span lang="zh-CN">世界您好!</span>
</div>
<div class="hello-example">
    <a href="http://example.cn">中国語(繁体):</a>
    <span lang="zh-TW">世界您好!</span>
</div>

とすると、以下のように表示されるでしょう。

英語: Hello World!

ポルトガル語: Olá Mundo!

中国語(簡体): 世界您好!

中国語(繁体): 世界您好!

仕様

仕様 状態 コメント
CSS Selectors Level 3 勧告  
CSS 2.1 勧告  
CSS 1 勧告  

ブラウザの互換性

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (有) 1.0 (1.7 or earlier) 7 9 3
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? 1.0 (1) ? ? ?

関連情報

ドキュメントのタグと貢献者

最終更新者: ethertank,
サイドバーを隠す