If you set your default as the last tab using section:last-child, this solution should work:
.tabs section,
.tabs section:target ~ section {
display: none;
}
When using the general sibling selector ~, the element must precede the siblings it targets, hence the use of last-child instead of first-child.
EDIT: 11-12-2011, I have found a way to highlight your a tags as active! This modified code is for proof of concept purposes (tested in FF only):
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;}