list - css pseudo class stops working when in different tag -

i'm stomped on 1 , don't know terms search for...(at least ones tried isn't turning close i'm looking for)

what i'm trying use css expand/collapse list using checkbox (no javascript, manager's request). problem i'm running works if it's under same tag list. example below

this works:

--head-- <style type="text/css">   .hide:checked ~ #list   {     visibility: collapse;    } </style>  --body--   <div>     <input type="checkbox" class="hide" checked="checked"> hide     <table id="list">       <tr>        <td>test</td>       </tr>       <tr>        <td>         <ol >            <li>item 1</li>            <li>item 2</li>            <li>item 3</li>         </ol>        </td>       </tr>     </table>   </div> 

but doesn't

--head-- <style type="text/css">   .hide:checked ~ #list   {     visibility: collapse;    } </style>  --body--   <input type="checkbox" class="hide" checked="checked"> hide   <div>     <table id="list">       <tr>        <td>test</td>       </tr>       <tr>        <td>         <ol >            <li>item 1</li>            <li>item 2</li>            <li>item 3</li>         </ol>        </td>       </tr>     </table>   </div> 

and have no idea why (i'm not trained in css btw)

note: difference placement of code if can't find what's different between blocks of code

<input type="checkbox" class="hide" checked="checked"> hide 

any great, thanks

the ~ operator in css means "followed by". however, checkbox isn't followed table, there's div. sure, table there, it's deeper inside dom tree.

solution: either take table out of div, or adjust css.

.hide:checked ~ div > #list