mozilla
Your Search Results

    属性セレクタ

    概要

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

    [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) ? ? ?

    関連情報

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

    Contributors to this page: ethertank, sii
    最終更新者: ethertank,
    サイドバーを隠す