CSS Master

Figure 1.26. A comments section with a yellow background

YoucanuseanycombinationofCSSwith:target,whichopensupsomefun

possibilitiessuchasJavaScript-lesstabs.CraigBucklerdetailsthistechniqueinhis

tutorial“HowtoCreateaCSS3-onlyTabControlUsingthe:targetSelector.”^14

We’llupdateitabittousemoreCSS3features.First,let’slookatourHTML:

01-selectors/pseudo-class-target.html (excerpt)

<div class="tabbed-widget">

<div class="tab-wrap">

<a href="#tab1">Tab 1</a>

<a href="#tab2">Tab 2</a>

<a href="#tab3">Tab 3</a>

</div>

<ul class="tab-body">

<li id="tab1">

<p>This is tab 1.</p>

(^14) http://www.sitepoint.com/css3-tabs-using-target-selector/
40 CSS Master