My simple and easy-to-understand implementation of CSS-only Tabs.

css-only-tabs.html

<style>
/* Hide radio buttons */
input[type="radio"][name="css-tab-rdo"] {
  display: none;
}

/* Show selected tab contents */
#tab1Rdo:checked ~ #tab1 { display: block; }

#tab2Rdo:checked ~ #tab2 { display: block; }

#tab3Rdo:checked ~ #tab3 { display: block; }

/* Styling the selected Tab */
#tab1Rdo:checked ~ label[for=tab1Rdo] { border: 1px solid blue; }

#tab2Rdo:checked ~ label[for=tab2Rdo] { border: 1px solid blue; }

#tab3Rdo:checked ~ label[for=tab3Rdo] { border: 1px solid blue; }

/* Style the tab content here */
.css-tab {
  margin: 10px;
  padding: 10px;
  display: none;
}

/* Style the tab labels here */
.css-tab-lbl {
  cursor: pointer;
  padding: 5px;
}
</style>
<!-- The radio buttons MUST be above the labels and divs for the CSS "~" (tilda) rule to work -->
<input id="tab1Rdo" type="radio" name="css-tab-rdo" checked />
<input id="tab2Rdo" type="radio" name="css-tab-rdo"/>
<input id="tab3Rdo" type="radio" name="css-tab-rdo"/>

<label for="tab1Rdo" class="css-tab-lbl">Tab 1</label>
<label for="tab2Rdo" class="css-tab-lbl">Tab 2</label>
<label for="tab3Rdo" class="css-tab-lbl">Tab 3</label>

<div id="tab1" class="css-tab">Tab 1 Contents</div>
<div id="tab2" class="css-tab">Tab 2 Contents</div>
<div id="tab3" class="css-tab">Tab 3 Contents</div>