UPDATE: In 2020, this method is still effective for linking tabs; however, if you need multiple tab sets on one page, consider using @chulian's approach with input[type=radio] instead of :target.

You can find an archive of the defunct html5rockstars.com demo here: https://web.archive.org/web/20121118201357/http://htmlrockstars.com/blog/using-css-to-create-a-tabbed-content-area-no-js-required/

A more comprehensive explanation of the same technique can be found here: http://www.sitepoint.com/css3-tabs-using-target-selector/

The key concept is utilizing the CSS3 :target selector to display the currently selected tab. While this works well for a single set of tabs on a page and fully supports browser back buttons, it requires specific conditions to function correctly. Here's an example structure:

<ul id="menu">
    <li><a href="#tab1">First tab</a></li>
    <li><a href="#tab2">Second tab</a></li>
    <li><a href="#tab3">Third tab</a></li>
</ul>
<div id="tab1" class="tab-content">Content of first tab</div>
<div id="tab2" class="tab-content">Content of second tab</div>
<div id="tab3" class="tab-content">Content of third tab</div>

In your stylesheet, define the following rules:

.tab-content {
    display: none;
}
.tab-content:target {
    display: block;
}

However, keep in mind that no content will show until a tab link is clicked unless explicitly directed to a specific tab (e.g., page.html#tab1). The suggested workaround by the second link involves the following adjustments:

.tab-content {
    z-index: 0;
    background-color: white;
    position: absolute;
    top: 100px;
    width: 100%;
    height: 300px;
}
.tab-content:first-child {
    z-index: 1;
}
.tab-content:target {
    z-index: 2;
}

This solution may seem unconventional as it relies on absolute positioning.

Alternatively, if having the default tab placed last in the HTML structure isn't an issue, you can opt for this layout:

<ul id="menu">
    <li><a href="#tab1">First tab</a></li>
    <li><a href="#tab2">Second tab</a></li>
    <li><a href="#tab3">Third tab</a></li>
</ul>
    <div class="tab-folder">
    <div id="tab2" class="tab-content">Content of second tab</div>
    <div id="tab3" class="tab-content">Content of third tab</div>
    <div id="tab1" class="tab-content">Content of first tab</div>
</div>

CSS styling for this structure would be:

.tab-folder > .tab-content:target ~ .tab-content:last-child, .tab-folder > .tab-content {
    display: none;
}
.tab-folder > :last-child, .tab-folder > .tab-content:target {
    display: block;
}

Considered by many as the most elegant solution, especially when accessibility and CSS support are crucial factors to consider.

Discovered this valuable resource that could potentially address your inquiry

http://css-tricks.com/functional-css-tabs-revisited/

Check out the demo here: http://css-tricks.com/examples/CSSTabs/radio.php

<div class="tabs">

   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Tab One</label>

       <div class="content">
           content goes here
       </div> 
   </div>

   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">Tab Two</label>

       <div class="content">
           content goes here
       </div> 
   </div>

    <div class="tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">Tab Three</label>

       <div class="content">
           content goes here
       </div> 
   </div>

</div>

CSS Styles

.tabs {
  position: relative;   
  min-height: 200px; /* This part sucks */
  clear: both;
  margin: 25px 0;
}
.tab {
  float: left;
}
.tab label {
  background: #eee; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-left: -1px; 
  position: relative;
  left: 1px; 
}
.tab [type=radio] {
  display: none;   
}
.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc; 
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}

A unique approach is taken with this method, which differs slightly from the :target method by using overflow and named anchors instead. One of the advantages is that your CSS doesn't need to have any knowledge about dynamic content. The generated markup only needs to align with:

<a href="#myFirstTab">Tab A</a>

in the navigation, accompanied by

<a name="myFirstTab"></a>

inside the tab itself (preferably at the end).

An interesting aspect of this method is that it relies on three simple CSS selectors, all of which are classes. This eliminates the strict requirements associated with IDs.

The concept involves creating a viewport with specific dimensions, positioned relatively or absolutely somewhere on the page. This viewport serves as the display area for the tabs. Rather than using display: none, overflow clipping is utilized to hide all tabs except the first one.

There are some challenges to overcome with this technique, such as ensuring proper content placement without partial scrolling. This is achieved by including a "clearance" div at the end of each tab to hold the named anchor. Any necessary adjustments are typically minor and straightforward.

For added functionality, the navigation links can be integrated into radio buttons to detect the "checked" status. Alternatively, the navigation can be duplicated in each tab with varying active classes. While redundant, this approach offers a dynamic navigation experience, potentially creating a 2D space. For practicality, toggling a class in the navigation with jQuery.toggle() is often sufficient.