CSS for a checked radio button's labels - css

Question

I'm using CSS supplied in another post by Behaves Ganging which hides and shows content based on inputs being checked or not.
Here is the CSS
input#show, input#hide {
display:none;
}
span#content {
display:none;
}
input#show:checked ~ label[for="show"]
{
display: none !important;
}
input#show:checked ~ span#content {
display:block;
}
input#hide:checked ~ span#content {
display:none;
}
And the HTML
<label for="show">
<span>[Show]</span>
</label>
<input type=radio id="show" name="group">
<span id="content">Content
<label for="hide">
<span>[Hide]</span>
<input type=radio id="hide" name="group">
</label>
</span>
See a working example here: http://jsfiddle.net/khnNe/466/
BUT, this CSS seems to be being ignored:
input#show:checked ~ label[for="show"]
{
display: none !important;
}
I want to hide the Label "Show" when it's input is checked. I've tried several other ways but none worked. ??
If I add CSS
label[for="show"]
{
display: none !important;
}
[Show] is hidden so it seems the
input#show:checked ~ label[for="show"]
is the culprit?

Answer 1

The selector is not working because the label is before the input.
The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.
You have to reverse the DOM order:
input#show,
input#hide {
display: none;
}
span#content {
display: none;
}
input#show:checked ~ label[for="show"] {
display: none !important;
}
input#show:checked ~ span#content {
display: block;
}
input#hide:checked ~ span#content {
display: none;
}
<input type=radio id="show" name="group">
<label for="show">
<span>[Show]</span>
</label>
<span id="content">Content
<label for="hide">
<span>[Hide]</span>
<input type=radio id="hide" name="group">
</label>
</span>