How to style parent when input:checked?

Question

css

The gist is this:

<div class="popup">
<table>
<tbody>
<tr>
<td style="width: 15%;"><h3>500</h3><input type="checkbox" checked="checked" onchange="calc()"
 value="500" id="key2"></td>
<td><strong>Выделить анкету</strong>выделите вашу анкету среди прочих 
(в 3 раза больше просмотров)</td>
</tr>
</tbody>
</table>
</div>

I want to ask .popup table{border-bottom: 10px solid #FFB2B2;}
at input[type=checkbox]:checked
How to implement it (preferably CSS)?

Answer 1

CSS can't do that. If you are interested in the JS version:

document.querySelector("input[type=checkbox]").onchange = function(){
   document.querySelector("table").classList.toggle("check", this.checked);
}

.check{
  border-bottom: 10px solid #FFB2B2;
}

Live here .

Answer 2

There is no such possibility in CSS.