Changing style properties of two html elements, with pseudo events - html

Question

I made a CSS code, which changes style properties two other html elements, with events.
When a check box is checked, I want to change background colour of a label box and a div tag. And when I uncheck the check box, the background colour must be toggled with the previous.
The code is working on changing css properties of label tag. But not working for div tag.
Here is the CSS:
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label
{
background: #999;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label
{
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked ~ #menu_content
{
height:100vh;
width:25vh;
position:fixed;
left:0;
top:11%;
background-color:#41a3d8;
}
input[type=checkbox]:not(:checked) ~ #menu_content
{
height:100vh;
width:25vh;
position:fixed;
left:0;
top:11%;
background-color:#fff;
border-style:solid;
border-width:1px 1px 1px 1px;
}
Here is the html code:
<div id="header">
<span id="nav_button">
<input type='checkbox' name='thing' id="thing"/>
<label for="thing">
</label>
</span>
<span id="title">
<TITLE>
</span>
</div>
<div id="menu_content">
<p id="menu_head">
Nav
</p>
<a href="#" id="menu_links">
Link1
</a>
<a href="#" id="menu_links">
Link2
</a>
<a href="#" id="menu_links">
Link3
</a>
</div>
I'm trying to do this, without using any kind of scripts

Answer 1

The ~ selectors only works with it siblings, so I would recommend making the div a sibling of the checkbox like the example.
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label
{
background: #999;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label
{
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked ~ #menu_content
{
height:100vh;
width:25vh;
position:fixed;
left:0;
top:11%;
background-color:#41a3d8;
}
input[type=checkbox]:not(:checked) ~ #menu_content
{
height:100vh;
width:25vh;
position:fixed;
left:0;
top:11%;
background-color:#fff;
border-style:solid;
border-width:1px 1px 1px 1px;
}
<div id="header">
<span id="nav_button">
<input type='checkbox' name='thing' id="thing"/>
<label for="thing">
</label>
<div id="menu_content">
<p id="menu_head">
Nav
</p>
<a href="#" id="menu_links">
Link1
</a>
<a href="#" id="menu_links">
Link2
</a>
<a href="#" id="menu_links">
Link3
</a>
</div>
</span>
<span id="title">
<TITLE>
</span>
</div>
Another option would be using Js..
or with pure css will be using css selectors in the url using :target() https://stackoverflow.com/a/9442590/2894798 (haven't tried...)

Answer 2

As you can see, the first two CSS rules work as desired, but the other ones don't. The reason is that label is a sibling to that input and follows directly after that input, which the + in the CSS selector corresponds to.
But #menu_content is not a sibling (as ~ would require) , it's two levels higher.
You won't be able to do this without a script, there are no CSS methods to select ancestors.
input[type=checkbox]+label {
background: #999;
height: 16px;
width: 16px;
display: inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked+label {
background: #0080FF;
height: 16px;
width: 16px;
display: inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked~#menu_content {
height: 100vh;
width: 25vh;
position: fixed;
left: 0;
top: 11%;
background-color: #41a3d8;
}
input[type=checkbox]:not(:checked)~#menu_content {
height: 100vh;
width: 25vh;
position: fixed;
left: 0;
top: 11%;
background-color: #fff;
border-style: solid;
border-width: 1px 1px 1px 1px;
}
<div id="header">
<span id="nav_button">
<input type='checkbox' name='thing' id="thing"/>
<label for="thing">
</label>
</span>
<span id="title">
<TITLE>
</span>
</div>
<div id="menu_content">
<p id="menu_head">
Nav
</p>
<a href="#" id="menu_links">
Link1
</a>
<a href="#" id="menu_links">
Link2
</a>
<a href="#" id="menu_links">
Link3
</a>
</div>