How can I rewrite this ID selector as a class or general selector?

Question

The following selector allows me to display four tabs, but I would like a generic code for displaying 5, 6, and more. Is there is another way to write this CSS code for any number of tabs? (I would prefer a CSS-only solution).

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
  display: block;
}

  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">Codepen</label>
    
  <input id="tab2" type="radio" name="tabs">
  <label for="tab2">Dribbble</label>
    
  <input id="tab3" type="radio" name="tabs">
  <label for="tab3">Dropbox</label>
    
  <input id="tab4" type="radio" name="tabs">
  <label for="tab4">Drupal</label>
  
   <input id="tab5" type="radio" name="tabs">
  <label for="tab5">Drupal</label>

Here is a JSFiddle with a full demo.

Answer 1

You may rewrite your html a bit to achieve this:

<input id="tab1" type="radio" name="tabs" class="tabs-radio" checked>
<label for="tab1">Codepen</label>
<section id="content1" class="tabs-content">
....
</section>
<input id="tab2" type="radio" name="tabs" class="tabs-radio">
....

Then you can simply do:

.tabs-radio:checked + * + .tabs-content {
  display: block;
}

Only problem is positioning of labels/blocks: one of them should be absolutely positioned