親Divの外のCSSセレクタ

Question

トップのチェックボックスが次のようになるまで、ナビゲーションバーが画面外に隠されているHTMLがあります。ラベル（hamburger png）をクリックしてチェックしますハンバーガーアイコンが再びクリックされ、ナビゲーションメニューがスクリーンからもう一度隠されるような時間になるまで。

もし私がヘッダー内にnavセクションを張っていたら、セレクター（+と〜）を使ってそれをターゲットにすることができました...しかし、それが新しいdivのときはそれを行う方法を考えることはできませんチェックボックスのすぐ隣ではなく、親の外側のdivです。彼らが共通に持つ唯一の親は＃ラッパーですか？しかし、私はどのように他の部門の内部からそれをターゲットにするのか分かりません。

純粋なCSSでこれをターゲットにして、チェックボックスがチェックされているときにnavメニューをポップアウトする方法はありますか？私はすでにJavaScriptを持っていますが、CSSでも同じようにしたいと思っています。

HTML、それは外のチェックボックスが含まれているheaderのであるので、あなたは、CSSを使用したチェックボックスからnavをターゲットにすることはできません

body{ 
     color: white; 
     background-color: black; 
     font-family: "PT Sans", "sans-serif"; 
     font-size: 1rem; 
    } 

    #container{ 
     margin: 0 auto; 
     min-width: 320px; 
     max-width: 1600px; 
    } 

    h1,h2,h3,h4,h5,h6{ 
     color:#FEBC11; 
     text-align: center; 
    } 

    header{ 
     padding: 1rem 0rem 1rem 0rem; 
     background-color: #333; 
    } 

    #logo{ 
     color:#FEBC11; 
     font-size: 1rem; 
     text-decoration: none; 
     margin-left: .5rem; 
     font-weight: bold; 
    } 

    #nav_open_icon{ 
     position: absolute; 
     top: 1rem; 
     right: 0; 
     margin-right: 1rem; 
     width: 30px; 
     height: 23px; 
    } 

    #nav_close_icon{ 
     display: none; 
     position: absolute; 
     right: 0; 
     top: 0.6rem; 
     width: 30px; 
     height: 30px; 
     margin-right: 1rem; 
    } 

    #hamburger{ 
     /*display: none;*/ 
    } 

    #overlay{ 

    } 

    nav{ 
     position: absolute; 
     left: -50%; 
     background-color:rgba(124,115,115,.2); 
     width: 10rem; 
    } 

    .nav_toggle{ 
     position: absolute; 
     left: 0%; 
     background-color:rgba(51,51,51,1); 
     } 

    #hamburger:checked nav + nav_toggle{ 

} 

    nav ul{ 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
    } 

    nav li{ 
     padding: 1.1rem; 
    } 

    nav a{ 
     color: white; 
     text-decoration: none; 
     margin-left: 1rem; 
    } 

    nav img{ 
     float: left; 
     margin: -.5rem 0rem 0rem -.2rem; 
     height: 35px; 
     width: 35px; 
    } 

https://jsfiddle.net/zaL594s8/

Answer 1

<div id="wrapper"> 
    <header> 
    <a href="#" id="logo">TitleBar</a> 
    <label for="hamburger" id="nav_open_icon"><img src="http://i.imgur.com/vv4Rdc9.png" alt="open-menu"></label> 
    <label for="hamburger" id="nav_close_icon"><img src="/img/hamburger/close.png" alt="close-menu"></label> 
    <input type="checkbox" id="hamburger"> 
    <div id="overlay"></div> 
    </header> 

    <nav> 
    <ul> 
     <li id="#"><a href="#">Home</a><img src="/img/home.png" alt="Home"></li> 
     <li id="#"><a href="#">Stuff</a><img src="/img/about.png" alt="About"></li> 
    </ul> 
    </nav> 
</div> 

CSS。私はことができない理由はありません、本当にありません

JS Fiddle

nav { 
    position: absolute; 
    left: -50%; 
    background-color: rgba(124, 115, 115, .2); 
    width: 10rem; 
    transition: .3s; 
} 

input:checked + nav { 
    position: absolute; 
    left: 0%; 
    background-color: rgba(51, 51, 51, 1); 
}