：ターゲット擬似セレクタとタブ

Question

したがって、CSSだけを使用してタブシステムを作成したいと思います。

私はこれまでのところ動作していますが、デフォルトでは1つのタブを表示する方法はわかりません。

タブ：

<section class="tabs"> 

    <ul> 
    <li><a href="#tab1">1</a></li> 
    <li><a href="#tab2">2</a></li> 
    <li><a href="#tab3">3</a></li> 
    </ul> 

    <section id="tab1"> content for 1... </section> 
    <section id="tab2"> content for 2... </section> 
    <section id="tab3"> content for 3... </section> 

</section> 

とCSS（最も重要な部分）：私はブロックするようにsection:first-childを設定した場合

.tabs section{ 
display: none; 
} 

.tabs section:target{ 
display: block; 
} 

だから私は（最初のタブがデフォルトで表示する必要があります）、 URLにアンカーがある場合、最初のタブとターゲットタブが表示されます。

どうすればこの問題を解決できますか？

Answer 1

さて、あなたは（section:last-child）デフォルトあなたの最後のタブを作る場合、私は、これは仕事ができると思う：一般兄弟セレクタ~を使用して

.tabs section, 
.tabs section:target ~ section { 
    display: none; 
} 

要素はそうしたがって、それはターゲット兄弟が先行している必要がfirst-childの要件ではなくlast-childの理由。

編集：11-12-2011、あなたのaタグをアクティブとして強調表示する方法を見つけました。特定のアプリケーションに適合していると仮定します。ここでは概念の実証のためのいくつかの簡単な変更されたコードは（のみFFでテスト）である：あなたができる、または喜んでいる場合はJavaScriptを使用して、依存

HTML

<section class="tabs"> 
    <ul class="nav"> 
    <li><a href="#tab1">1</a></li> 
    <li><a href="#tab2">2</a></li> 
    <li><a href="#tab3">3</a></li> 
    </ul> 


    <section id="tab2"><div class="tabActive"></div> content for 2... </section> 
    <section id="tab3"><div class="tabActive"></div> content for 3... </section> 
    <section id="tab1"><div class="tabActive"></div> content for 1... </section> 

</section> 

CSS

.nav { 
    position: relative; 
    z-index: 2; 
    margin: 10px .5em 0; 
} 
.nav li { 
    padding: .5em; 
    width: 2em; 
    text-align: center; 
    float: left; 
} 

.tabs section, 
.tabs section:target ~ section { 
    display: none; 
} 

.tabs section:target, 
.tabs section:last-child { 
    display: block; 
    clear: left; 
    margin: 0 .5em; 
    min-width: 300px; /* for show only */ 
    min-height: 200px; /* for show only */ 
    border: 1px solid black; 
    position: relative; 
    z-index: 1; 
    padding: 10px; 
} 

.tabActive { /* set for tab 1 */ 
    width: 2em; 
    height: 2em; 
    position: absolute; 
    top: -2em; 
    left: .5em; 
    border: 1px solid black; 
    border-bottom: transparent; 
    background-color: inherit; 
    margin-top: -1px; /* top border height */ 
    margin-left: -1px; /* left border width */ 
} 

#tab1 {background-color: cyan;} 
#tab2 {background-color: yellow;} 
#tab3 {background-color: pink;} 

#tab2 .tabActive {left: 3.5em;} 
#tab3 .tabActive {left: 6.5em;}