input - CSS for a checked radio button's labels -

i'm using css supplied in post behaves ganging hides , shows content based on inputs being checked or not.

here 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 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 working example here: http://jsfiddle.net/khnne/466/

but, css seems being ignored:

input#show:checked ~ label[for="show"] {     display: none !important; } 

i want hide label "show" when it's input checked. i've tried several other ways none worked. ??

if add css

label[for="show"] {     display: none !important; } 

[show] hidden seems

input#show:checked ~ label[for="show"] 

is culprit?

the selector not working because label before input.

the general sibling combinator made of "tilde" (u+007e, ~) character separates 2 sequences of simple selectors. elements represented 2 sequences share same parent in document tree , element represented first sequence precedes (not immediately) element represented second one.

you have reverse 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>