CSS. Как обратиться к элементу по id?

Question

[rasetty]

Как обратится к элементу по ID.
У меня есть два элемента - span и input[checkbox].
Мне нужно чтобы при изменении чекбокса менялись стили span.
Проблема в том, что они находятся в разных местах страницы.

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

#ch: checked {
color: red;
}

Comments

[Pavel Kuzyakin]

если они в разных местах страницы — только js

Answer 1

[Ankhena]

При такой разметке на CSS никак.

Вариант без JS:

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

</div>

#ch:checked + div .sp {}

Суть в том, что вы скрываете сам инпут. Делать это нужно используя CSS паттерн visually-hidden (вариантов несколько, легко гуглятся) для того, чтобы осталась функциональность для доступности.
А стилизуется лейбл или его псевдоэлемент.
Клик происходит по лейблу, но инпут переключается, потому что они связаны. Находится при этом лейбл может где угодно.
Нюанс один: при клике на лейбл, браузер прокручивает страницу к тому месту, где находится инпут. Так что аккуратно, если они совсем в разных местах.