CSS3の:targetを使ってタブを作る

CSS

CSS 3のセレクタ「:target」でタブメニューをつくる - builder by ZDNet Japan
これを見ててもうちょっと簡単にできる方法を思いつきました。

<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>CSS3 :targetを利用してタブを作る</title>
        <style type="text/css">
            a{
                text-decoration:none;
                color: #000000;
            }
            #tabs a{
                border-top: 1px solid #0000ff;
                border-left: 1px solid #0000ff;
                border-right: 1px solid #0000ff;
                margin: 0;
                padding: 3px;
                border-top-right-radius: 5px;
                border-top-left-radius: 5px;
            }
            .content {
                border: 1px solid #0000ff;
                position: absolute;
            }
            .content:not(:target){
                display: none;
            }
        </style>
    </head>
    <body>
        <h2>CSS3 :targetを利用してタブを作る</h2>
        <div id="tabs">
            <a href="#tab1">タブ１</a>
            <a href="#tab2">タブ２</a>
        </div>
        <div id="tab1" class="content">
            <p>タブ１の中身</p>
        </div>
        <div id="tab2" class="content">
            <p>タブ２の中身</p>
        </div>
    </body>
</html>

上記の記事では:targetで指定された要素をz-indexを高くして表示を上にしていますが、この方法はそれぞれのタブの中身にcontentというclass属性をつけて、:targetではないcontentを非表示にしています（ .content:not(:target)の部分）。結果、:targetのcontentだけ表示されるようにしています。