Changing style properties of two html elements, with pseudo events

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">
        &lt;TITLE&gt;
    </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">
        &lt;TITLE&gt;
    </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...)