Question

I’m trying to do a sort of pure html/css tabs system. I have

<div>
    <input class="tab1" type="radio" checked/>
    <input class="tab2" type="radio"/>
</div>

<div class="content">
    <div class="tab-1">

    </div>
    <div class="tab-2">

    </div>
</div>

And my css

.content > div {
    opacity:0;
}

input.tab1:checked ~ .tab-1, input.tab2:checked ~ .tab-2  {
    opacity: 1
}

However the tilde ~ isnt working as its supposed to (because the divs aren’t exactly a sibling) – How can I get the css to sort of work across to other nodes? Is there a way of ‘saying’ and in css?

Answer 1

You would have to go up one level and you cannot do that in CSS as there is no parent selector in CSS. You might want to read this article: why we don’t have a parent selector in CSS (there will be a parent selector in CSS4, however)

What you can do:

Option 1: change your HTML:

.a

<input class="tab1" type="radio" checked/>
<input class="tab2" type="radio"/>

<div class="content">
    <div class="tab-1"></div>
    <div class="tab-2"></div>
</div>

and use input.tab1:checked ~ .content .tab-1

.b Try a structure like described here: http://css-tricks.com/functional-css-tabs-revisited/ – basically, the idea is that you don’t make a group of tabs and a group of tab contents, but you group each tab with its corresponding content.

Option 2: use JavaScript (which goes against the idea of a pure CSS tab system, it’s true)

---

Important note: keep in mind that setting opacity < 0 on a parent node makes all the children have the same opacity value and there is nothing you can do to change that (except setting the opacity of the parent to 1 again 😛 ).