Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Conor Vanoystaeyen
Conor Vanoystaeyen
16,687 Points

my :checked + class wont work

I wont to make a hamburger menu bet the :checked selector wont work. It works wen i do

.toggle:checked {
  display: block;

bet not with de + .menu what did I do wrong?

 <nav>
        <div class="nav">
          <label class="hamburger__menu" for="toggle">&#9776</label>
          <input class="toggle" type="checkbox" id="toggle">
        </div>

        <div class="menu-box">
          <ul class="menu">
            <li class="menu__item"><a class="item__link" href="#">home</a></li>
            <li class="menu__item menu__item--yellow"><a class="item__link" href="#">humo@festivals</a></li>
            <li class="menu__item"><a class="item__link" href="#">humor</a></li>
            <li class="menu__item menu__item--red"><a class="item__link" href="#">video</a></li>
            <li class="menu__item"><a class="item__link" href="#">fotospecials</a></li>
            <li class="menu__item"><a class="item__link" href="#">nu in humo</a></li>
            <li class="menu__item"><a class="item__link" href="#">tv/film</a></li>
            <li class="menu__item"><a class="item__link" href="#">actua</a></li>
            <li class="menu__item"><a class="item__link" href="#">muziek</a></li>
            <li class="menu__item"><a class="item__link" href="#">boeken</a></li>
            <li class="menu__item"><a class="item__link" href="#">humo sapiens</a></li>
          </ul>
        </div>
      </nav>

.menu {
  padding: 0 2rem 0 1rem;
  display: none;
}

.toggle {
  display: none;

  &:checked + .menu {
    display: block;
  }
}
Zimri Leijen
Zimri Leijen
11,835 Points

En when you do .menu:checked?

Conor Vanoystaeyen
Conor Vanoystaeyen
16,687 Points

zimri lejien It is not working bet thx for commenting :)

1 Answer

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

This isn't CSS code (the syntax coloring gives you a clue). Did you mean to compile it (or use SCSS syntax)?

But even with that fixed, the "toggle" input and the "menu" list are not siblings (nor are they adjacent), since they are each contained in different div's. So the sibling selector doesn't select the menu.

Conor Vanoystaeyen
Conor Vanoystaeyen
16,687 Points

sorry indeed this is scss it will be converted to css in the end. but because they are not siblings it cannot work?

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

It can't work with the current HTML structure and a CSS sibling selector. But it's reasonably easy to do in JavaScript.