title: ckecked element number in :nth-child css rule
body: <p>I've got some radiobuttons on my page and some sections.</p>
  
  <pre><code>&lt;input id="tab1" type="radio" name="responsive-tabs" class="responsive-select" checked&gt;
  &lt;input id="tab2" type="radio" name="responsive-tabs" class="responsive-select"&gt;
  
  &lt;section id="content1"&gt;
  some content
  &lt;/section&gt;
  
  &lt;section id="content2" &gt;
  some content
  &lt;/section&gt;
  </code></pre>
  
  <p>I need n'th section to bee seen when n-th radiobutton selected.
  Of course, it's easy to achieve by using jquery, but i would like to do this by css only, so please help me. Now i do it like this </p>
  
  <pre><code>#tab1:checked ~ #content1,
  #tab2:checked ~ #content2,
  #tab3:checked ~ #content3,
  #tab4:checked ~ #content4 {
    display: block;
  }
  </code></pre>
  
  <p>but i want this css rule to be more flexible and independable from elements count.</p>