Css checked Pseudo-class not working in Html page

6 days ago 8
ARTICLE AD BOX

I want to change background color of "maincontent" div element to red when I clicked check box, which is in header tag of my HTML page. please give any idea how to do that.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style type="text/css"> nav > .container-fluid > input[id='openSidebarMenu']:checked ~ #maincontent { background-color:red; } </style> </head> <body> <header> <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"> <div class="container-fluid"> <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu"> </div> </nav> </header> <div id="maincontent" class="container"> <main role="main" class="pb-3"> ........ </main> </div> </body> </html>
Read Entire Article