Can :checked selector affect a div with which has no relation? - html

Question

Some of my issues was trying to follow some tutorials about off-screen navigation menu but they didn't quite fit my requirements.
Here is one example
What I am trying to accomplish here is kinda difficult and I can't find the answer. What I want is to press on the label and toggle the sidebar. Most of the tutorials show that but only when these two are directly related.
<div class="header">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>
<input type="checkbox" class="sidebar__toggle" id="sidebar__toggle">
<label for="sidebar__toggle">More info</label>
</li>
</ul>
</div>
<div class="content">
...rest of code here...
</div>
<div class="sidebar">
...sidebar code here...
</div>
And css(I'll be omitting the rest for the sake of simplicity):
.sidebar__toggle:checked ~ .sidebar {
background-color: pink;
}
As I followed the various tutorials on the web, this was the method if they we're related somehow, but mine(or THE one I need) actually is not.

Answer 1

You can put the checkbox anywhere you want as long as the label points to its id using the for attribute. I put it in front of .sidebar below:
.sidebar__toggle:checked ~ .sidebar {
background-color: pink;
}
<div class="header">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>
<label for="sidebar__toggle">More info</label>
</li>
</ul>
</div>
<div class="content">
...rest of code here...
</div>
<input type="checkbox" class="sidebar__toggle" id="sidebar__toggle">
<div class="sidebar">
...sidebar code here...
</div>