How to select the sibling of a parent element with CSS?

Question

I want to select .nav-Menu element from .Hamburger element when input checked. How can I do this?

<div class="Hamburger">
    <input type="checkbox">
    <span></span>
    <span></span>
    <span></span>
</div>
<div class="nav-Menu">
    <div class="nav-Item">
        <a href="#">Suspendisse et diam</a>
        <div class="sub-Menu">
            <div class="nav-Item"><a href="#">Sollicitudin orci sed</a></div>
            <div class="nav-Item"><a href="#">Mauris a tellus laoreet</a></div>
        </div>
    </div>
</div>

Can't be done using CSS alone. You will need to write the script. — Sumit Sahay, May 14 '21 at 14:19
As @SumitSahay mentioned, this is not possible in CSS. You will need to use JavaScript to actually "select" or simulate a click on a menu item. — Brandon McConnell, May 14 '21 at 14:35
Please provide additional context on exactly what it is you are trying to do. "Selecting" a menu item when a checkbox is checked will not be possible in CSS. **However**, if you are trying to expand/collapse the hamburger menu or a sub-menu with pure CSS using inputs, that is possible. Please clarify. — Brandon McConnell, May 14 '21 at 14:39

Rickard Elimää · Answer 1 · 2021-05-14T14:55:48.723

CSS only, where you use a label to display an (animatable) hamburger icon, and hide the checkbox that toggles the visibility of the menu through the ~ selector.

I added the hamburger animation for fun, mostly because I recently made one.

/** THE RELEVANT CODE FOR ANSWERING YOUR QUESTION **/

#hamburger_checkbox {
  display: none;
}

.nav-Menu {
  display: none;
}

#hamburger_checkbox:checked ~ .nav-Menu {
  display: block;
}

/* HAMBURGER ICON */

label.hamburger-container {      
  --hamburger-icon-color: #000;
  --hamburger-icon-size: 20px;
  --hamburger-icon-stroke-height: 2px;
  --hamburger-icon-stroke-width: var(--hamburger-icon-size);
  
  display: block;
  padding: 10px;

  height: var(--hamburger-icon-size);
  width: var(--hamburger-icon-size);
  
  cursor: pointer;
  position: relative;
}

/** ANIMATABLE HAMBURGER ICON ELEMENTS **/

.line,
.line::before,
.line::after {
  position: absolute;
  height: var(--hamburger-icon-stroke-height);
  width: var(--hamburger-icon-stroke-width);
  background-color: var(--hamburger-icon-color);

  pointer-events: none;
  transition: transform 250ms, top 100ms, bottom 100ms;
}

.line {
  top: 50%;
  transform: translateY(-50%);
}

.line::before,
.line::after {
  content: '';
  display: block;
}

.line::before {
  top: -6px;
}

.line::after {
  bottom: -6px;
}

/** CLOSE ANIMATION **/

#hamburger_checkbox:checked ~ .hamburger-container > .line {
  transform: rotate(45deg);
}

#hamburger_checkbox:checked ~ .hamburger-container > .line::before,
#hamburger_checkbox:checked ~ .hamburger-container > .line::after {
  transform: rotate(90deg);
}

#hamburger_checkbox:checked ~ .hamburger-container > .line::before {
  top: 0px;
}

#hamburger_checkbox:checked ~ .hamburger-container > .line::after {
  bottom: 0px;
}

<input type="checkbox" name="checkbox" id="hamburger_checkbox">
<label for="hamburger_checkbox" class="hamburger-container">
  <div class="line"></div>
</label>


<div class="nav-Menu">
  <div class="nav-Item">
    <a href="#">Suspendisse et diam</a>
    <div class="sub-Menu">
      <div class="nav-Item"><a href="#">Sollicitudin orci sed</a></div>
      <div class="nav-Item"><a href="#">Mauris a tellus laoreet</a></div>
    </div>
  </div>
</div>

Good solution, but it doesn't specifically address the question about CSS selectors. — isherwood, May 14 '21 at 15:32

How to select the sibling of a parent element with CSS?

1 Answers1