부모 div 외부의 CSS 선택자

Question

상단의 확인란이 선택 될 때까지 탐색 바가 화면 외부에 숨겨져있는 HTML이 있습니다. 레이블 (햄버거 png)을 클릭하여 선택하면 화면에 다시 나타납니다 햄버거 아이콘이 다시 클릭되고 탐색 메뉴가 화면에서 한 번 더 숨겨지기 전까지는

이제 헤더 안에 nav 섹션을 붙이면 선택기 (+와 ~)를 사용하여 대상을 지정할 수 있지만 ... 새 div 인 경우에는 그렇게 할 수있는 방법을 생각할 수 없습니다. 체크 박스 바로 옆이 아니라 부모의 외부 div입니다. 그들이 공통적으로 가질 수있는 유일한 부모는 # 래퍼인가? 하지만 다른 div 내부에서 어떻게 타겟팅할지 알아낼 수는 없습니다.

순수 CSS에서 이것을 타겟팅하여 체크 박스가 체크되어있을 때 nav 메뉴가 튀어 나오게하는 방법이 있습니까? 나는 이미 자바 스크립트를 가지고 있지만, 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); 
}