CSS Tabs with Default Open Tab

This is a minor edit of Kalechip’s CSS Tabs. I originally made it for my changelog, because I wanted people to be able to filter through different years, but also I didn’t want to deal with JavaScript or PHP. The original has all tab content hidden by default until you click a tab. This edit lets you set a default tab, which is visible by default.

Demo

HTML

<!-- Tab links -->
<p><a href="#tab1">Tab #1</a> <a href="#tab2">Tab #2</a></p>

<!-- Tab content -->
<div class="tabwrap">
    <section id="tab2">
        <!--Regular tab content here-->
    </section>
    <section class="default" id="tab1">
        <!--Default tab content here-->
    </section>
</div>

You must put your default tab at the bottom of your tabwrap, after all of the other tabs. The CSS will not work properly otherwise. The order of the other tabs doesn't matter. Change "tab1" and "tab2" to whatever you want your tab's names to be.

For accessibility, I highly recommend starting each tab content section with a heading (<h1>-<h6>).

CSS

.tabwrap section.default {display: block;}
.tabwrap section {display: none;}
.tabwrap section:target {display:block;}
.tabwrap section:target ~ section.default {display:none;}