1

W/O JavaScript, I can control the display of tables by using CSS and check boxes as in this example, Functional sibling selector example using the sibling selector which is described in What does the “~” (tilde/squiggle/twiddle) CSS selector mean? 

#C-control:checked ~ .C-content {display: table;}
#F-control:checked ~ .F-content {display: table;}
.C-content                      {display: none;}
.F-content                      {display: none;}
<input id='C-control' type='checkbox'>C
<input id='F-control' type='checkbox'>F

<table class='C-content'>
<tr><td>Bern</td><td>ZZZZ</td></tr>
<tr><td>Nairobi</td><td>xxx</td></tr>
</table>

<table class='F-content'>
<tr><td>Dallas</td><td>yyyy</td></tr>
<tr><td>New York</td><td>AAA</td></tr>
</table>

I would like to control the display of individual rows in a similar manner, Non-functional by row example

Non-functional by row code

#C-control:checked ~ .C-content {display: table-row;}
#F-control:checked ~ .F-content {display: table-row;}
.C-content                      {display: none;}
.F-content                      {display: none;}
<input id='C-control' type='checkbox'>C
<input id='F-control' type='checkbox'>F

<table>
<tr class='C-content'><td>Bern</td><td>ZZZZ</td></tr>
<tr class='F-content'><td>Dallas</td><td>yyyy</td></tr>
<tr class='C-content'><td>Nairobi</td><td>xxx</td></tr>
<tr class='F-content'><td>New York</td><td>AAA</td></tr>
</table>
CW Holeman II
  • 4,661
  • 7
  • 41
  • 72
  • Not all questions about CSS sibling selectors questions are answer by a single SO question. There are some nuances to its use. – CW Holeman II Feb 26 '21 at 15:26

1 Answers1

2

This should work. Basically you have to first establish what sibling you mean then go deeper. Adding table into the selector after the ~ sibling selector will do that.

Your first example worked because the table had the classes and both of the tables were direct siblings of the checkboxes.

#C-control:checked ~ table .C-content {display: table-row;}
/*       I added this --^  */
#F-control:checked ~ table .F-content {display: table-row;}
/*           and this --^  */
.C-content                      {display: none;}
.F-content                      {display: none;}
<input id='C-control' type='checkbox'>C
<input id='F-control' type='checkbox'>F

<table>
  <tr class='C-content'><td>Bern</td><td>ZZZZ</td></tr>
  <tr class='F-content'><td>Dallas</td><td>yyyy</td></tr>
  <tr class='C-content'><td>Nairobi</td><td>xxx</td></tr>
  <tr class='F-content'><td>New York</td><td>AAA</td></tr>
</table>
Dominik
  • 6,078
  • 8
  • 37
  • 61