CSS3の属性セレクタ

属性セレクタは、属性名や属性値によって、要素を指定する事ができます。Gecko系などのブラウザは、CSS3の属性セレクタなどに対応しています。どういった指定が出来るのか、覚え書きとしてメモ。サンプルとして、下記の(X)HTMLを想定します。

<a href="/" title="Lucky bag::blogのトップへ">トップ</a>

一番単純なのが、属性名を指定する方法です。下記は、 title 属性を持つ全ての a 要素に1pxのドットで下線を表示することができます。

a[title]{
        border-bottom: 1px dotted #666666;
}

次は、 title 属性の値が「Lucky bag::blogのトップへ」の場合のみ、指定する方法。

a[title="Lucky bag::blogのトップへ"]{
        border-bottom: 1px dotted #666666;
}

次からCSS3での指定方法。 title 属性の値が「Lucky」で始まる場合のみ、指定する方法。

a[title^="Lucky"]{
        border-bottom: 1px dotted #666666;
}

次は、 title 属性の値が「トップへ」で終わる場合のみ、指定する方法。

a[title$="トップへ"]{
        border-bottom: 1px dotted #666666;
}

次は、title属性の値内に「bag」が含まれる場合のみ、指定する方法。

a[title*="bag"]{
        border-bottom: 1px dotted #666666;
}

次期IE7でここらへんが実装されないかしらっつう、淡い期待を持ってたりするのは無駄ですか？

この記事についての情報