Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E + F), но в отличие от них стилевые правила применяются ко всем близлежащим элементам. К примеру, для селектора h1~p
стиль будет применяться ко всем элементам , располагающихся после заголовка <h1>
. При этом <h1>
и <p>
должны иметь общего родителя, так что если <p>
вставить внутрь <div>
, то стили применяться уже не будут.
htmlbook.ru/css/selector/sibling
Соответственно, нужный вам селектор выглядит так:
#check:checked ~ .box .stop