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