CSS3セレクタで遊んでみた。

html5

html5をちゃんと覚えなきゃなーと思って、最近ちょっと弄くって見てるんだけど、
CSS3のセレクタを見てたら、今までロジックで頑張ってた部分がスタイルで指定できて面白い。


まず目についたのは、「E:nth-child(n)」と「E:target」。
「E:target」の方がちょっと遊べそうなので、こっちを先にしてみた。
「参照URIの目標となっているE要素」ということらしい。


サンプル。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
<!--
    h1:target {
        color: red;
    }
// -->
</style>
</head>
<body>

<header>
    <h1>メニュー</h1>
    <nav>
        <ul>
            <li><a href="#section1">section1</a></li>
            <li><a href="#section2">section2</a></li>
        </ul>
    </nav>
</header>

<article>
    <section>
        <h1 id="section1">Section1</h1>
        <p>セクション１</p>
    </section>
    <section>
        <h1 id="section2">Section2</h1>
        <p>セクション２</p>
    </section>
</article>

</body>
</html>

メニューのリンクをクリックすると、セクションの見出しに遷移して、フォントを赤くする。
どのメニューをクリックしたか色を変えられるので、ユーザビリティがよくなるかも。