Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

属性セレクタ

概要

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

[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 つ存在する属性を表します。
[attr operator value i]
閉じ角括弧の前にi(または I )を追加すると、(ASCIIの範囲内の文字の場合)値は大文字と小文字を区別せずに比較されます。

<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;}
    
    /* email の input は blue のボーダーを持ちます */
    /* これは、"email", "EMAIL","eMaIL" など、 "email" の任意の大文字にもマッチします。 */
    input[type="email" i] {border-color: blue;}
</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!

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

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

仕様

仕様 状態 コメント
Selectors Level 4
attribute selectors の定義
草案 ASCIIの大文字と小文字を区別しない属性値選択のために追加された修飾子。
CSS Selectors Level 3 勧告  
CSS 2.1 勧告 初期の定義

ブラウザの互換性

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有) 1.0 (1.7 or earlier) 7 9 3
大文字・小文字修飾子 49.0 47.0 (47.0) ? ? 9
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? ? 1.0 (1) ? ? ?
大文字・小文字修飾子 ? 49.0 47.0 (47.0) ? ? 9 49.0

関連情報

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

 このページの貢献者: momdo, ethertank, sii
 最終更新者: momdo,