属性値セレクタについて

いまさらながら、属性値セレクタについて。恥ずかしながら知らなくて、今回のWebC...

いまさらながら、属性値セレクタについて。
恥ずかしながら知らなくて、今回のWebCreatorsに記載されていて、目からうろこだったのでメモ。

TIPS088よりネタ引用。
例えば、内部リンクと外部リンクを見た目として分けたいときを考える。
つまり、
<p>ダミーテキストダミーテキスト<a href="http://sample.com">外部リンク</a>ダミーテキストダミーテキスト<a href="../hoge/hoge.html">ダミーテキスト</p>
みたいな構造をもつとき、

外部と内部の見分け方は、「http:があるかどうか」ということになる。
そこで登場するのが、属性値セレクタ。

この場合、「http:という文字列がhref属性の値の頭にあれば、このCSSを適用させる」という指示を与えてあげればいい。

んで、具体的にはどう書くかというと、
a[href^="http:"]{
    /*ここに書き込む*/
}

これで、外部リンクのときのみのスタイルシートが生成される。

ちなみに、これをブラウザ確認したところ、
IE6以前には対応できていない模様。チョロメ(googlr chrome)でも表示されました。

いまさらですが、お試しあれ。

この記事の周辺情報

著者

稲本[せぶん]浩介
福岡の企業に在籍し、Webを中心に活動中。Webディレクター、IA(インフォメーション アーキテクト)、マークアップエンジニア、CSSコーダーetc。
Twitterボタン

amazonさんがこのサイトを見て、書籍を紹介してくれています。