2

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

And today I thought: CSS is perfectly capable of hiding things based on the state of checkboxes, which would achieve pretty much the same effect. The only trouble is, I have no idea whether CSS selectors are flexible enough to select the right table rows.

So, my question is this: given some 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
... and so one...
</table>

Can we do something like this?

magic ~ > :checked ~ tr {display: none}
Mark VY
  • 1,489
  • 16
  • 31

1 Answers1

4

Final Answer:

Here is my mockup of what you are trying to do. By the 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 for rock</td></tr>
<tr class=ice><td>whatever for ice</td></tr>
<tr class=gas><td>whatever for gas</td></tr>
</table>

Old Answer:

If you seperate the label and the checkbox it can be achieved like 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>
Naren Murali
  • 19,250
  • 3
  • 27
  • 54
  • Wow, really nice! (Though in retrospect I guess I wanted :not:checked.) So I suppose there's no way to do this for an arbitrarily placed checkbox, by somehow saying "this checkbox id goes with this css class"? – Mark VY Sep 10 '17 at 19:23
  • @MarkVY Can you give me the exact scenario I will try to replicate, You had given some CSS and HTML which helped me understand the scenario quickly can you give me something like that? – Naren Murali Sep 10 '17 at 19:25
  • @MarkVY Updated my answer, is this what you need? – Naren Murali Sep 10 '17 at 19:44
  • Sorry, didn't mean to distract you by cosmetic issues. I meant that if "ice" is checked, then "ice" should be visible. Thank you for an amazingly quick response. And thanks for the compliment :) – Mark VY Sep 10 '17 at 19:50
  • @MarkVY That is what I have done in my updated answer, the first code snippet can you check this? – Naren Murali Sep 10 '17 at 19:51
  • Not quite: try checking two boxes, everything disappears :) – Mark VY Sep 10 '17 at 20:18
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/154083/discussion-between-naren-murali-and-mark-vy). – Naren Murali Sep 10 '17 at 20:19