Reach elements outside of parent container with selector ~ in CSS

Question

I am trying to recreate a JavaScript "effect". There are some words, if you click on the words, the description of it drops down. If you click on another word, then other description shows up instead of the previous one. I am trying to make this thing work with a checkbox-technique - which I used in responsive menu -. My problem is that it seems I cannot reach the outer elements.

part of HTML:

<table>
    <th>
        <input type="checkbox" name="showtext" id="showtext" class="showtext">
        <label for="showtext"><span aria-hidden="true">Show/Hide text</span></label>
        <p id="sometext">Some Text</p>

    </th>
</table>

part of CSS:

  #showtext:checked~ #sometext{
    color:red;
}

If the #sometext (which I want to manipulate) is at the "same place" as the checkbox, it works. But as soon as I put outside of the or <table> it is not. How do I refer #sometext in CSS to reach it e.g outside the <table>?

I tried something like:

#showtext:checked~ table or #showtext:checked~tr table - but not seemed working...