demo
source
<!DOCTYPE html>
<meta charset="utf-8">
<title>:target</title>
<style>
section{ display: block; border: 1px solid #000; padding: 2em; }
section:target{ display: block; }
section:not(:target){ display: none; }
p.re{ display: none; }
section:target ~ p.re { display: block; text-align: center; }
</style media="screen">
<ul id="navi">
<li><a href="#a">section-A</a></li>
<li><a href="#b">section-B</a></li>
</ul>
<section id="a">
<h1>section-A</h1>
</section>
<section id="b">
<h1>section-B</h1>
</section>
<p class="re"><a href="#navi">navi</a></p>- CSS3未対応のIEではセクションがずらっと並ぶだけ
- Safari4では
section:target ~ p.re { display: block; }が有効にならなかった。イケルと思ったんだけどな…。セクション毎にナビを挿入してもいいんだけど。
SafariやChromeも2011年10月現在のバージョンなら、section:target ~ p.re { display: block; }が意図通り適応されてるっぽいです。