属性値セレクタについて

いまさらながら、属性値セレクタについて。
恥ずかしながら知らなくて、今回の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)でも表示されました。

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