html - Hide table row based on checkbox in pure CSS -

a bit of backstory, care: time ago stumbled across this: https://medium.com/front-end-hacking/how-it-feels-to-learn-javascript-in-2017-a934b801fbe, , in particular, this: https://brlewis.github.io/2017/planets.html

and today thought: css capable of hiding things based on state of checkboxes, achieve pretty same effect. trouble is, have no idea whether css selectors flexible enough select right table rows.

so, question this: given html resembling this:

<label><input type=checkbox id=rock> terrestrial</label> <label><input type=checkbox id=gas> gas giant</label> <label><input type=checkbox id=ice> ice giant</label> <table> <tr class=rock><td>whatever <tr class=ice><td>whatever ... , one... </table> 

can this?

magic ~ > :checked ~ tr {display: none} 

final answer:

here mockup of trying do. way nice question!!!

input#rock:checked ~ table tr.rock {display: block}    input#gas:checked ~ table tr.gas {display: block}    input#ice:checked ~ table tr.ice {display: block}    input:checked ~ table tr {display:none}

<input type=checkbox id=rock><label> terrestrial</label>  <input type=checkbox id=gas><label> gas giant</label>  <input type=checkbox id=ice><label> ice giant</label>  <table>  <tr class=rock><td>whatever rock</td></tr>  <tr class=ice><td>whatever ice</td></tr>  <tr class=gas><td>whatever gas</td></tr>  </table>

old answer:

if seperate label , checkbox can achieved so!

input:checked ~ table tr {display: none}

<input type=checkbox id=rock checked><label> terrestrial</label>  <input type=checkbox id=gas><label> gas giant</label>  <input type=checkbox id=ice><label> ice giant</label>  <table>  <tr class=rock><td>whatever</td></tr>  <tr class=ice><td>whatever</td></tr>  </table>