Grupo de pestañas en la misma página

[edgar4615]

Muy buenas chicos, ante todo gracias por la ayuda que siempre me habéis prestado en las pequeñas dudas que van surgiendo.

El tema es el siguiente:

Quiero modificar un recurso de pestañas en html para poder utilizar varios tabs groups dentro de una misma página, el caso es que ya tengo "algo", pero quiero optimizarlo sin llegar a recurrir a javascript...

Este es el html del que dispongo...

Código HTML:

<div class="tabGroup">
    <input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked"/>
    <label for="rad1">Tab 1</label>
 
    <input type="radio" name="tabGroup1" id="rad2" class="tab2"/>
    <label for="rad2">Tab 2</label>
     
    <input type="radio" name="tabGroup1" id="rad3" class="tab3"/>
    <label for="rad3">Tab 3</label>
     
    <br/>
 
    <div class="tab1">Tab 1 content</div>
    <div class="tab2">Tab 2 content</div>
    <div class="tab3">Tab 3 content</div>
</div>
 

Código CSS:

/* This matchs tabs displaying to thier associated radio inputs */
.tab1:checked ~ .tab1, .tab2:checked ~ .tab2, .tab3:checked ~ .tab3 {
    display: block;
}
 

Con este código, muestro que check tengo marcado...

Mi pregunta es, si tengo X grupos de tabs en la misma página ¿cómo puedo evitar el tener que llevar la "cuenta" y completar el css con "tab1:checked ~ .tab1, tabX:checked ~ .tabX...?

Me gustaria tener grupos de tabs:

Código HTML:

<div class="tabGroup">
    <input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked"/>
    <label for="rad1">Tab 1</label>
 
    <input type="radio" name="tabGroup1" id="rad2" class="tab2"/>
    <label for="rad2">Tab 2</label>
     
    <input type="radio" name="tabGroup1" id="rad3" class="tab3"/>
    <label for="rad3">Tab 3</label>
     
    <br/>
 
    <div class="tab1">Tab 1 content</div>
    <div class="tab2">Tab 2 content</div>
    <div class="tab3">Tab 3 content</div>
</div>
<div class="tabGroup2">
    <input type="radio" name="tabGroup2" id="rad1" class="tab1" checked="checked"/>
    <label for="rad1">Tab 1</label>
 
    <input type="radio" name="tabGroup2" id="rad2" class="tab2"/>
    <label for="rad2">Tab 2</label>
     
    <input type="radio" name="tabGroup2" id="rad3" class="tab3"/>
    <label for="rad3">Tab 3</label>
     
    <br/>
 
    <div class="tab1">Tab 1 content</div>
    <div class="tab2">Tab 2 content</div>
    <div class="tab3">Tab 3 content</div>
</div>
<div class="tabGroup3">
    <input type="radio" name="tabGroup3" id="rad1" class="tab1" checked="checked"/>
    <label for="rad1">Tab 1</label>
 
    <input type="radio" name="tabGroup3" id="rad2" class="tab2"/>
    <label for="rad2">Tab 2</label>
     
    <input type="radio" name="tabGroup3" id="rad3" class="tab3"/>
    <label for="rad3">Tab 3</label>
     
    <br/>
 
    <div class="tab1">Tab 1 content</div>
    <div class="tab2">Tab 2 content</div>
    <div class="tab3">Tab 3 content</div>
</div>
 

Algo así y de esta forma poder simplificar el css. Me gustaría evitar el tema de jquery y javascript...

Gracias de nuevo chicos