属性セレクタ (E[foo^="bar"])
- 最終更新：2009年7月 7日 13:06
CSS3で定義されたパターンE[foo^="bar"]の属性セレクタは、指定した属性の属性値が前方一致した場合、指定した要素にスタイルが適用されます。
- 対応ブラウザ
-
属性セレクタのサンプル
a[href^="http://"] {
padding-right: 15px;
background: url(../img/item/icon_blank.gif) no-repeat right .5em;
}
a[href^="http://css-happylifezero.com/"] {
padding-right: 0;
background: none;
}
<ul>
<li><a href="http://example.com/">外部リンク</a></li>
<li><a href="http://example.com/">外部リンクのテキストが長い場合...（略）</a></li>
<li><a href="http://css-happylifezero.com/">内部リンクだけど絶対URL</a></li>
<li><a href="/property/">内部リンク</a></li>
</ul>
http://から始まるリンクにだけスタイルが適用されるようにしています。
また、内部リンクでも絶対URLで書いている場合の対策として、自サイト内のリンクの場合はアイコンなどが付かないようにしています。
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
外部リンクにだけアイコンを付けたりする場合に便利ですが、この方法だとIE7では、テキストが多く2行になってしまうと、アイコンが変な場所に表示されてしまいます。
（クラスセレクタを使ってIE6でも表示されるようにした場合も同様になってしまいます）
なので、JSを使って、背景ではなくimg要素として配置するのが良いかもしれません。
もしくは、IE7が対応していない:after疑似要素を使って、変な表示になるくらいだったら表示させないと割り切ってしまうのも有りだと思います。
