a:visitedを子に持つdiv要素の背景色を変えたい
<div class="entry"> <h2><a href="…" /></h2> </div>このような文書で、aのリンク先を訪れると、div.entryの色が変わるようにしたい。
XPathみたいに、こういう子要素を持つノード、という指定は、CSSではできないっぽいので、JavaScriptでやるのが穏便かと思いきや、
div.entry { position: relative; } div.entry > h2 > a:visited:after { content: " "; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: -1; background-color:gray; }でうまくいった。
iPhone向けなので、Safari限定で考えられるのがうれしいところ。
実際には背景色ではなくて、新たに生成されたノードをdiv.entryにぴったり張り付くようにしている。
で、この情報をJavaScriptから取れるとどのサイトにアクセスしたか、という情報が取れてしまうので色々対策されているらしいんですが… どうやって防ぐんだろう。
http://blog.netswitch.jp/articles/2008/09/01/how-to-color-the-element-which-has-a-visited-child-by-css