reiner css Toggle ohne Geschwister

Question

eine Checkbox für einen CSS-Toggle Mit diesem Code funktioniert ... Das div verschwindet, wenn Sie das Kontrollkästchen klicken ...

input:checked ~ #test{display:none} 

<div id="main"> 
<input type="checkbox">Click Me 
<div id="test">This is a test</div> 
</div> 

Aber hier ist es nicht funktioniert, weil das TEST div kein Geschwister ist, oder? Es ist außerhalb des Hauptdivis ...

input:checked ~ #test{display:none} 

<div id="main"> 
<input type="checkbox">Click Me 
</div> 
<div id="test">This is a test</div> 

Gibt es eine Möglichkeit, dies mit nur CSS zu arbeiten? Ich dachte, wenn ich das ~ entferne, dann würde jedes Div mit einer ID = TEST verschwinden, egal wo es ist, aber das ist nicht der Fall.

Answer 1

auch diese Art von Arbeiten

der Auslöser in Ihrem Haupt aber die tatsächliche Checkbox auf dem gleichen Niveau wie "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>