CSS. How to access an element by id?

Question

css

How to access an element by ID.
I have two elements - span and input[checkbox].
I need the span styles to change when the checkbox changes.
The problem is that they are in different places on the page.

<div> <span id="sp">TEST</span> </div>
<div> <input type="checkbox" id="ch"> </div>

#ch: checked {
color: red;
}

Answer 1

With this markup on CSS, no way.
Variant without JS:

<input type="checkbox" id="ch">
<div>
<span id="sp" class="sp">TEST</span> 
<label for="ch">тут стилизованный чекбокс</label>  

</div>

#ch:checked + div .sp {}
The bottom line is that you hide the input itself. You need to do this using the visually-hidden CSS pattern (several options, easy to google) in order to leave the functionality for accessibility.
And the label or its pseudo-element is styled.
The click happens on the label, but the input is toggled because they are linked. The label can be located anywhere.
There is only one nuance: when you click on the label, the browser scrolls the page to the place where the input is located. So be careful if they are in completely different places.