CSS3 Pre-Reference



属性セレクタ

属性を指定

試す

コード

p[title] {
    color: red;
}

p[class="example"] {
    color: green;
}

p[hello="Cleveland"][goodbye="Columbus"] {
    color: blue;
}

a[rel~="copyright"] {
    color: gray;
}

a[hreflang|="en"] {
    color: purple;
}

p[title^="test"] {
    color: maroon;
}

a[href$=".html"] {
    color: navy;
}

p[title*="hello"] {
    color: teal;
}

サンプル

対応していれば、文字がそのとおりの色で表示されます。

赤色

緑色

青色

灰色

紫色

茶色

濃紺色

青緑色

コメントする


対応ブラウザ

Firefox
すべて
Chrome/Safari
すべて
Opera
すべて
InternetExplorer
まだ

パラメータ

レベル 2.0
参考文献 Selectors Level 3#6.3. Attribute selectors

解説

属性を指定します。

CSS2で使えた属性セレクタはそのまま有効です。

[属性名]
その属性を指定されている要素にマッチします。値は何でもかまいません。
[属性名=値]
属性と値のペアが完全に合致する要素にマッチします。
[属性名~=値]
属性が空白文字で区切られた単語のリストで、かつそのリストの中に値と完全に合致するものがある要素にマッチします。なので、値には空白文字や空文字列は指定できません。
[属性名|=値]
属性が指定された値で始まっている要素にマッチします。値は完全に合致するか、最初のハイフンまでの値に合致する必要があります。なので、値にはハイフンを含む文字列は指定できません。

CSS3では、新たに3つの属性セレクタが導入されています。IEでは未実装。

[属性名^=値]
属性が指定された値で始まっている要素にマッチします。”[属性名|=値]”のような制限はありません。空文字列は指定できません。
[属性名$=値]
属性が指定された値で終わっている要素にマッチします。空文字列は指定できません。
[属性名*=値]
属性が指定された値を含む要素にマッチします。空文字列は指定できません。

h1[title] {/* 1 */}
span[class="example"] {/* 2 */}
span[hello="Cleveland"][goodbye="Columbus"] {/* 3 */}
a[rel~="copyright"] {/* 4 */}
a[hreflang|="en"] {/* 5 */}
object[type^="image/"] {/* 6 */}
a[href$=".html"] {/* 7 */}
p[title*="hello"] {/* 8 */}

それぞれ、以下のようなコードにマッチします。

<h1 title="hoge">テスト1</h1>
<span class="example">テスト2</span>
<span hello="Cleveland" goodbye="Columbus">テスト3</span>
<a rel="copyright index grossary">テスト4</a>
<a hreflang="ja-ja,en">テスト5</a>
<object type="image/png">テスト6</object>
<a href="network/stats.html">テスト7</a>
<p title="say hello and goodbye">テスト8</a>

CSS3から名前空間の指定が可能になっています。

@namespace foo url(http://www.example.com);
[foo|title] { color: blue }
[foo|alt="test"] { color: yellow }
[|class] { color: red }
[*|
class] { color: green }
[h1] { color: purple }

1つ目のルールは、名前空間「foo」に属するtitle属性のある要素の色を青にします。
2つ目のルールは、名前空間「foo」に属するalt="test"が指定されている要素の色を黄色にします。
3つ目のルールは、名前空間の指定がないclass属性のある要素の色を赤にします。
4つ目と5つ目のルールは、すべての名前空間のclass属性のある要素の色を紫色にします。

トラックバック

投稿されたコメント