css - Select next element when input is checked -

html:

<label>   <input type="checkbox" /> </label> <div>   stuff </div>

i'd able style div element depending on checked state of input, like

input ~ div{   display: none; }  input:checked ~ div{   display: block; }

obviously the~ selector doesn't seem work here. neither +

is there other solution (besides javascript) ?

sadly there no way select ancestor in pure css, require select ancestor's sibling.

i have seen people surround other content label - while questionable practice, allow use + selector style div:

<label>     <input type="checkbox" />      <div>       stuff     </div> </label>

edit:

or (thanks @lnrbob pointing out)

<label for="mycheckbox">     label </label>  <input id="mycheckbox" type="checkbox" /> <div>     stuff </div>

Parth Code