Guren Guren - 1 month ago 9
CSS Question

Why can't I get this input element to act on my html?

My goal: create Night Mode button that will change colors of website to darker colors.

Method: I used a label element that was tied to an input element which when activated would change the color of anything inside of the website. (think a "night mode" button that will darken the entire site for night time readers).

Can someone tell me why the code I came up with is not working? I already cross checked with other coders and we don't understand why... it might be something very simple.



* {
color:red;
margin: 0 auto;
font-family: 'Raleway', sans-serif;
}
.wrapper {
width:80%;
height:100%;
margin:0 auto;
border: 1px solid rgb(22, 36, 218);
}
.header{
height:60px;
}
.nav {
height:30px;
border: 1px solid rgb(0,0,0);
}
input#Color {
position:absolute;
}
input#Color:checked + .nav {
background-color: rgb(0,0,0);
}

<!DOCTYPE html>
<!-- DOCKMANN INDEX PAGE - CODE: D001 -->
<html>

<head>
<!-- CSS --><link rel="stylesheet" type="text/css" href="stylesheet.css" />
<!-- JS --><script src="script.js"></script>

<link href="https://fonts.googleapis.com/css?family=Raleway:300" rel="stylesheet">
</head>
<!-- END HEAD -->
<body>
<label for="Color">Poop</label>
<input type="checkbox" id="Color"/>
<div class="wrapper">
<div class="header">
test header
</div>
<!-- end header -->
<div class="nav">
<p>
test nav
</p>
</div>
<!-- end nav -->
<div class="content">
test content
<div class="mainContent">
mainContent
</div>
<div class="sidebar">
Sidebar
</div>
</div>
<!-- end content -->
<div class="footer">
test footer
</div>
<!-- end footer -->
</div>
<!-- end wrapper -->
</body>

</html>




Answer

It's because .nav is nested in .wrapper and the CSS expects it to be a sibling.

Try

input#Color:checked + .wrapper

or if you only want the nav affected;

input#Color:checked + .wrapper .nav