Почему не работает :checked?

Question

[Skelemon]

<div class="burger">
<div>
    <input type="checkbox" id="burger">

   

</div>



<label for="burger">

<div class="nav">

<div class="cherta"></div>
<div class="cherta2"></div>
<div class="cherta3"></div>

</div>

</label>

<div id="nav2">
    <div class="textnav2"><a href="#" class="textnav2">Lorem</a></div>
    <div class="textnav2"><a href="#" class="textnav2">ipsum</a></div>
    <div class="textnav2"><a href="#" class="textnav2">Dot</a></div>
    <div class="textnav2"><a href="#" class="textnav2">art</a></div>

</div>

</div>

#nav2{

display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
top: 3vh;
left:0vw;
width: 100%;
font-size: 2vw;
color: #2D2424;
text-decoration: none;
background-color: #FFCC00;
height: 7vh;

visibility: hidden;
}

.burger:checked + #nav2{
   
visibility: visible;

}

Answer 1

[Сергей delphinpro]

Работать будет только если элементы на одном уровне

<input type="checkbox" id="burger">
<div id="nav2"></div>

#burger:checked + #nav2 {
}

Note:
Использовать идентификаторы для задания стилей – плохая практика.

Comments

[Skelemon]

Спасибо

Answer 2

[Денис Соколов]

Так оно и не будет работать. Вы checked даете диву а у него нету такого свойства

Comments

[Skelemon]

сменил .burger на #burger не работает все равно

[Денис Соколов]

Попробуйте так

#burger:checked #nav2{
    visibility: visible;
}