Pure css toggle with no sibling - html

Question

Using a checkbox for a css toggle, this code works... The div disappears when you click the checkbox...
input:checked ~ #test{display:none}
<div id="main">
<input type="checkbox">Click Me
<div id="test">This is a test</div>
</div>
But here, it doesn't work, because the TEST div is not a sibling, right? It's outside of the main div...
input:checked ~ #test{display:none}
<div id="main">
<input type="checkbox">Click Me
</div>
<div id="test">This is a test</div>
Is there a way to make this work with just css? I thought if I remove the ~ then any div with an ID = TEST would disappear no matter where it is, but that's not the case.

Answer 1

well this kind of works
the trigger is inside your main but the actual checkbox must be on the same level as "test"
#main {white-space:nowrap;}
#check {
display:none;
}
p {display:inline-block;}
.fake{
display:inline-block;
width: 10px;
height: 10px;
background:lightgray;
}
#check[type=checkbox]:checked + #main + #test {
display:none;
}
#check[type=checkbox]:checked + #main > label {
background: gray;
}
<input id="check" type="checkbox">
<div id="main">
<label class="fake" for="check"></label>
<p>Click Me</p>
</div>
<div id="test">This is a test</div>