属性セレクタ

概要

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

[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="https://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="https://example.cn">中国語（簡体）:</a>
    <span lang="zh-CN">世界您好！</span>
</div>
<div class="hello-example">
    <a href="https://example.cn">中国語（繁体）:</a>
    <span lang="zh-TW">世界您好！</span>
</div>

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

英語: Hello World!

ポルトガル語: Olá Mundo!

中国語（簡体）: 世界您好！

中国語（繁体）: 世界您好！

仕様

ブラウザの互換性

関連情報

• CSS selectors: basic browser support
• CSS selectors and pseudo selectors browser compatibility