CSS selector for elements within a sibling

Issue

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

#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>

Solution

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>

Answered By - Dominik