Hey, I have a question regarding CSS selectors in relation to my design.
I've been experimenting with manipulating checkboxes using CSS and trying to use multiple selectors like "+", "~", etc. to trigger events when the checkbox is checked or unchecked.
I'm a bit puzzled as to why this approach isn't working, especially when using the "~" selector. My understanding is that "+" selects elements directly after the first element, while "~" selects all elements that come after the previous one. This is my first attempt at this, so I'm still learning and trying to grasp the concept. Does ":checked" not serve as a reference point when chaining multiple selectors? I've included two attempts on the jsfiddle for reference.
Although this will eventually be a navigation menu, for now, I've left it as is to focus on understanding selectors.
HTML
<div id="container">
<header>
<input type="checkbox" id="navigation_drawer">
<label for="navigation_drawer" id="drawer_open"></label>
<label for="navigation_drawer" id="drawer_close"></label>
<nav id="navigation">
<ul>
<li id="home_page"><a href="#">Home</a></li>
<li id="about_page"><a href="#">About</a></li>
</ul>
</nav>
</header>
</div>
CSS
label#drawer_open{
position: absolute;
top: 2;
right: 0;
margin-right: 1rem;
background-image: url('http://i.imgur.com/Nxafddw.png');
background-image: no-repeat;
width: 35px;
height: 23px;
}
#navigation{
background-color:blue;
}
#navigation_drawer:checked + #container #navigation{
background-color:red;
}
#navigation_drawer:checked + container #navigation{
background-color:red;
}
Thanks!
Edit: It seems there were some mistakes made while copying and pasting the code here. Here's an updated fiddle of the original problem for your reference. I appreciate the feedback and help provided. https://jsfiddle.net/y9x8accc/6/