title: CSS Tab Control - How do I show only the first div?
body: <p>Okay...I know there are already loads of Pure CSS Tab Controls out there...</p>
  
  <p>Here is my HTML</p>
  
  <pre><code>&lt;div class="tabs"&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="#tabPage1"&gt;One&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tabPage2"&gt;Two&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tabPage3"&gt;Three&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id="tabPage1"&gt;
      &lt;p&gt;
          Hello World
      &lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="tabPage2"&gt;
      &lt;p&gt;
          Goodbye World
      &lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="tabPage3"&gt;
      &lt;p&gt;
          Another World, somewhere far, far away!
      &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS</p>
  
  <pre><code>.tabs &gt; div {
      display: none;
  }
  
  .tabs &gt; div:target {
      display: block;
  }
  </code></pre>
  
  <p>There's no styling for this example as I'm only concerned with the behavior.</p>
  
  <p>You can try it here...<a href="http://jsfiddle.net/rcrdC/" rel="nofollow">http://jsfiddle.net/rcrdC/</a></p>
  
  <ol>
  <li>How do I get it to display the first div until an anchor is clicked?</li>
  <li>How do I get it to leave the displayed div...displayed, even when I change the anchor to something else (i.e. #tabPage4)...if that makes sense?</li>
  </ol>