Select Label Using CSS Selector

I'm using a radio button to create tabs from CSS only. The problem I'm running into is that I can't figure out how to select the that references the radio button. I k

Solution 1:

You can achieve this by CSS only, but only with restructured HTML and more ugly CSS.

Look at this example: http://jsfiddle.net/kizu/6KeTR/16/

Here you should move all the inputs out of their containers to the place where they would immediately precede the blocks you want them to affect. In that case, you place it so you could then target the parents of the tabs and their content using ~ combinator, and some nth-child selectors like this:

#tab-1:checked ~ .content-container > .tab:first-child  > .content,
#tab-2:checked ~ .content-container > .tab:nth-child(2) > .content,
#tab-3:checked ~ .content-container > .tab:nth-child(3) > .content {}

However, such CSS-only thingies are more like proof-of-concept — they are not that maintainable and usable as their JS counterparts. So I'd recommend using them only for fun :)

Solution 2:

CSS

.bgcolor1{

background-color:#blue;

}
.bgcolor2{

background-color:green;

}
.bgcolor3{

background-color:red;

}

JQUERY

$('input[name=radio-set1]:checked', '#main').addClass(bgcolor1)

$('input[name=radio-set2]:checked', '#main').addClass(bgcolor2)

$('input[name=radio-set5]:checked', '#main').addClass(bgcolor3)

HTML

 <input id="tab-1" type="radio" name="radio-set1" class="tab-selector" checked="checked"/>
 <input id="tab-2" type="radio" name="radio-set2" class="tab-selector" checked="checked"/>
 <input id="tab-3" type="radio" name="radio-set3" class="tab-selector" checked="checked"/>

<label class="bgcolor1" for="tab-1">Tab 1</label>
<label class="bgcolor2" for="tab-2">Tab 2</label>
<label class="bgcolor3" for="tab-3">Tab 3</label>