cssセレクタ|パターンマッチングとか

外部サイトへのリンクには判りやすいアイコンをつけたいな、と思った
どうせなら外部リンク一つ一つにclassを付与する方法ではなく、今まであんまり使わなかったcssの指定でなんとかならないかな、とも思った

‘外部リンク アイコン’で検索したらヨモツネット|外部リンクだけにアイコンをつけることのできる CSS のセレクタが上位にヒットしたので参考にさせてもらい、勉強の為 htmlにまとめる。

[追記|2009年9月9日2:24]
外部内部どっちにもアイコンが表示される不具合があったので一応修正(できてる?)

練習の方は

みたいにアイコンをbackgroundで表示してるけど、blogの方は

てしてた。

その場合 http の url にマッチしたものにアイコンをつけて、その後でhttp://blog.sakurachiro.comやhttp://sakurachiro.comと自分のドメインにマッチしたもののcontentを消す事になるんだけどcontent:noneで削除してた。

詳しくメモるの忘れたけど、たぶんFirefox以外のoperaやIEやwebkit系で表示すると、「http://blog.sakurachiro.com」や「http://sakurachiro.com」以下へのリンクにもこのアイコン画像()が表示されてておかしいなa[href^=”http”]:afterて効かないのかな?いやいや試したじゃないかと首を傾げながらcssをいじっていると
content:none、これどうもFirefoxしか対応してない。
でcontent:” “;でアイコンを上書きしてみたんだけど、content:” “;て大丈夫なのか?

もう一回ヨモツネットさんはどうやってるんだろうと確認しにいったらページが表示されなくなってた、
たしか、IE6も対応するような丁寧なつくりだった記憶があるんだけど、残念。

[追記|2009年9月3日15:52]
http://sakurachiro.com/_exercise/stylesheet/index.htmlにアップしてあるけど、もうちょっと命名法を考えないと次のサンプルを作ったときに困るんじゃないのか?>自分
[/追記]
例のごとくちょっと遠いところからスタートしてしまい、当初の目的を見失いつつある。

原理はcss3のE[foo^=”bar”]を使って、httpから始まるリンクをパターンマッチさせるというもの。
httpから始まるということは絶対パスというもので、絶対パスを使うと言う事は外部サイトへのリンクの可能性が強いという事だからかな?


コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.