Creating CSS-only tabs involves hiding the radio button and styling the tab label accordingly.
.tabs input[type="radio"] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs label {
display: block;
min-height: 150px;
padding: 4px 4px;
[...]
}
.tabs label:hover {
background: #E0F8E0;
}
.tabs .tab-content {
z-index: 2;
display: none;
overflow: hidden;
width: 100%;
font-size: 1.08em;
line-height: 1.1em;
padding: 22px;
position: absolute;
top: 53px;
left: 0;
background: #ffffff;
}
.tabs [id^="tab"]:checked + label {
top: 0;
padding-top: 3px;
border-top: 3px solid #E0F8E0;
}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
display: block;
}
However, when it comes to the visible div content, the inner radio buttons and labels should revert back to a standard style.
<ul class='tabs'>
<li>
<input type='radio' name='tabs' id='tab_101' checked />
<label for='tab_101'>
<img id='101' name='masteroption %>' src='/masters/101.jpg' />
</label>
<div id='tab-content_101' class='tab-content'>
<input type="radio" id="432432" name="depth" value="432" checked="checked" class='tabs-inner'>
<label class='tabs-inner-label'>432mm</label>
I have assigned specific classes to the inner radio buttons and labels,
.tabs-inner[type='radio'] + label {
display: inline-block;
margin-left: 0.5rem;
margin-right: 1rem;
margin-bottom: 0;
vertical-align: baseline;
}
.tabs-inner-label {
display: block;
margin: 0;
font-size: 0.875rem;
font-weight: normal;
line-height: 1.8;
color: #0a0a0a;
}
but the browser developer tool indicates that the applied class is still coming from the parent element instead of the directly assigned one https://i.sstatic.net/32wxg.png
How can I apply different styles to these nested elements?