pseudo selector: target CSS

Question

Я использую (:target{}) для запуска различных состояний для основной навигации и фильтра. Код работает так, как я ожидаю, для секции фильтра, но когда я беру тот же код и меняю пару параметров, он не работает.

Вот HTML-

<nav id='main-nav' class='main-nav'> 
    <ul> 
    <li class='adopt'><a href="http://localhost/petlist/public/site/index">Adopt</a></li> 
    <li class='post'><a href="http://localhost/petlist/public/site/post">Post</a></li> 
    <li class='shelter'><a href="http://localhost/petlist/public/site/shelters">Shelters</a></li> 
    <li class='navFavorites'><a href="http://localhost/petlist/public/site/favorites">Favorites</a></li> 
    <li class='mypets'><a href="http://localhost/petlist/public/site/myPets">My Pets</a></li> 
    <li class='login'><a href="http://localhost/petlist/public/site/login">Login</a></li> 
    <li class='logout'><a href="http://localhost/petlist/public/logOut">Log out</a></li> 
    </ul> 
</nav> 
<form id="filter" class="filter" action="http://localhost/petlist/public/site/index" accept-charset="utf-8" method="post">  
    <select name="petsDropDown" id="form_petsDropDown"> 
    <option value="allPets">All Pets</option> 
    <option value="dogs">Dogs</option> 
    <option value="cats">Cats</option> 
    <option value="other">Other</option> 
    </select>  
    <input name="petName" value="City, state or zip" type="text" id="form_petName" />    
    <select name="breedDropDown" id="form_breedDropDown"> 
    <option value="allBreeds">All Breeds</option> 
    <option value="yorkie">Yorkshire Terrier</option> 
    <option value="pit">Pit-Bull</option> 
    <option value="poodle">Poodle</option> 
    </select>  
</form> 
<div class='page-wrap'> 
    <header class='main-header'> 
    <a class="open-nav" href="#main-nav"></a>   
    <a class="close-nav" href="#"></a>    
    <a class="open-filter" href="#filter"></a>   
    <a class="close-filter" href="#"></a> 
    </header> 
</div> 

А вот CSS

.page-wrap{ 
    width: 100%; 
    transition: all 0.3s ease; 
    -webkit-transition: 0.3s ease; 
} 


.main-header{ 
    width: 100%; 
    overflow: hidden; 
    position: fixed; 
    z-index: 1000; 
    transition: all 0.3s ease; 
    -webkit-transition: 0.3s ease; 
    background-color: $topNavBlack; 
    margin-bottom: $ten; 
    border-bottom: 1px solid $petListBlue; 
h1{ 
    font-family: steelfishregular; 
    font-size: 35px; 
    letter-spacing: 1px; 
    width: 60px; 
    color: $logoWhite; 
    padding: $ten; 
    margin: 0 auto; 
} 
.open-nav{ 
    display: block; 
    width: 35px; 
    height: 35px; 
    background-image: url('../img/nav.svg'); 
    background-repeat: no-repeat; 
    background-position: center; 
    float: left; 
    border-radius: 3px; 
    margin: $ten; 
    background-color: $petListBlue; 
} 
.close-nav{ 
    display: none; 
    width: 35px; 
    height: 35px; 
    background-image: url('../img/nav.svg'); 
    background-repeat: no-repeat; 
    background-position: center; 
    float: left; 
    border-radius: 3px; 
    margin: $ten; 
    background-color: $petListBlue; 
} 
.open-filter{ 
    display: block; 
    width: 35px; 
    height: 35px; 
    background-image: url('../img/settings.svg'); 
    background-repeat: no-repeat; 
    background-position: center; 
    float: right; 
    margin: $ten; 
    border-radius: 3px; 
    background-color: $petListBlue; 
} 
.close-filter{ 
    display: none; 
    width: 35px; 
    height: 35px; 
    background-image: url('../img/settings.svg'); 
    background-repeat: no-repeat; 
    background-position: center; 
    float: right; 
    margin: $ten; 
    border-radius: 3px; 
    background-color: $petListBlue; 
    } 
} 

.main-nav{ 
    position: fixed; 
    top: 0; 
    left:0; 
    width: 0; 
    height: 100%; 
    z-index:2000; 
    background-color: #303030; 
    overflow: hidden; 
    transition: height none; 
    transition: width 0.3s ease; 
    -webkit-transition: 0.3s ease; 
    &:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    height: 100%; 
    width: 34px; 
    } 
} 
#main-nav:target{ 
    width: 80%; 
} 
#main-nav:target + .page-wrap { 
    margin-right: -80%; 
    .open-nav { 
    display: none; 
    } 
    .close-nav { 
    display: block; 
    } 
    .main-header { 
    width: 100%; 
    } 
} 

Это CSS, который на самом деле работает, как я хочу, чтобы это.

.filter{ 
    position: fixed; 
    top: 0; 
    right: 0; 
    width: 0; 
    height: 100%; 
    z-index:2000; 
    background-color: #303030; 
    overflow: hidden; 
    transition: height none; 
    transition: width 0.3s ease; 
    -webkit-transition: 0.3s ease; 
    &:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    height: 100%; 
    width: 34px; 
    } 
} 
#filter:target { 
    width: 80%; 
} 
#filter:target + .page-wrap { 
    margin-left: -80%; 
    .open-filter { 
    display: none; 
    } 
    .close-filter { 
    display: block; 
    } 
    .main-header { 
    width: 100%; 
    } 
} 

Answer 1

Попробуйте изменить этот

#main-nav:target + .page-wrap 

к этому

#main-nav:target ~ .page-wrap 

после .page-wrap не помещается сразу после #main-nav