Is there a CSS selector I can use to show an element once a checkbox is selected, no matter where it is on the page?

Using the ~ css selector it is possible to display some elements once a checkbox is clicked, which can be used to display and hide menus once elements are clicked, as this tutorial shows.

But the tilde selector doesn't select all the elements on the page, is there a selector that does?

I would like the .showtext and .hidetext <span> tags to be shown or hidden once a checkbox is clicked. Here is a js fiddle link.

HTML

<!-- The checkbox input & label partner -->
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle">Menu 
<span class="showtext">show menu</span>
<span class="hidetext">hide menu</span>
</label>

<!-- The navigation we wish to toggle -->
<nav>
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Articles</a></li>
        <li><a href="">Colophon</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</nav>

CSS

.hidetext { display: none }
input[type="checkbox"]:checked  .hidetext{
   display: block; 
}

/* Set the input position to absolute, send it off screen with zero opacity */
input[type="checkbox"] {
    left: -9999px;
    opacity: 0;
    position: absolute;
}

/* Minor visual styling to make the label more button-y */
label {
    border: 1px solid currentColor;
    border-radius: 4px;
    cursor: pointer;
    padding: 10px;
}

/* Set nav to absolute (avoids odd page rendering space pop-in) */
nav {
    opacity: 0;
    position: absolute;
    z-index: -2;
}

/* Show nav when checkbox is checked */
input[type="checkbox"]:checked ~ nav {
    opacity: 1;
    z-index: 1;
}