title: How to set Default tab using target?
body: <p>i am trying to build a simple tabbed interface and i am stalled. All works fine except, when cant seem to find a way to set default tab when loaded. </p>
  
  <p>I would like to see when page loads, i want the tab-1 to be visible. Can it be done using pure css, if not for jquery</p>
  
  <p>Here is the code. </p>
  
  <pre><code>&lt;div class='tabs'&gt;
                      &lt;ul class='horizontal'&gt;
                          &lt;li&gt;&lt;a href="#tab-1"&gt;General&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#tab-2"&gt;Showcase Box&lt;/a&gt;&lt;/li&gt;
  
                      &lt;/ul&gt;
  &lt;div id='tab-1' class="tab"&gt; Tab1  Content here &lt;/div&gt;                  &lt;div id='tab-1' class="tab"&gt; Tab 2 Content here &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.tabs div:not(:target) { display:none; }
  
  .tabs div:target { display:block; }
  </code></pre>