CODEWITHSUNDEEP
csssassnavigationcss-selectors
jpsweeney94
jpsweeney94

Reputation: 143

How do you apply css to the parent's sibling element when input is checked?

I'm working on getting a mobile hamburger navigation to work, but I'm having trouble applying CSS to the element due to nesting/relation of the elements. I have the hamburger icon (#mobile-menu) animating properly based on the input (#nav-trigger) being checked or not (turns into an X).

But when #nav-trigger is checked, i also want to change the absolute positioning of #header-nav (bringing it into view when checked). This is where I'm stuck. How do i use CSS selectors to apply a CSS rule change to #header-nav when #nav-trigger is checked? I'm using SCSS and i've tried nesting selectors like ~, +, and more but i can't get it to work. Any help is greatly appreciated. Thank you!

<nav id="header-nav">
    <ul>
        <li>
            <a>Nav item</a>
        </li>
        <li>
            <a>Nav item</a>
        </li>
        <!-- etc... -->
    </ul>
</nav>
<div id="mobile-menu-container">
    <div id="mobile-menu-div">
        <label id="mobile-menu-label" for="nav-trigger"></label>
        <input type="checkbox" id="nav-trigger"/>
        <div id="mobile-menu"></div>
    </div>
</div>

Upvotes: 2

Views: 879

Answers (2)

Lerner Zhang
Lerner Zhang

Reputation: 7130

Yes, it is possible using the :has selector:

#header-nav:has(+#mobile-menu-container #nav-trigger:checked){
  position: absolute;
  top: 100px;
  left: 100px;
}
<nav id="header-nav">
<ul>
    <li>
        <a>Nav item</a>
    </li>
    <li>
        <a>Nav item</a>
    </li>
    <!-- etc... -->
</ul>
</nav>
<div id="mobile-menu-container">
<div id="mobile-menu-div">
    <label id="mobile-menu-label" for="nav-trigger"></label>
    <input type="checkbox" id="nav-trigger"/>
    <div id="mobile-menu"></div>
</div>
</div>

Check the input box to relocate the items in the #header-nav, and here is the pen on Codepen: https://codepen.io/lerner-zhang/pen/WNPdvPO

Upvotes: 2

Ezra Siton
Ezra Siton

Reputation: 7741

Use javascript - no broswer support (yet) to go "back" "Traversing" (parent - parent - sibling and so on) by CSS only. 

div :parent :parent ~ .... no way!! :)

Related StackOverflow Q: Is there a CSS parent selector?

Basic vanilla JS example:

  var checkbox = document.querySelector("input[name=hamburger]");
  var header = document.getElementById("header-nav");
  var label = document.getElementById("mobile-menu-label");
  var checked = checkbox.checked;

  if (checked){
    // Checkbox is checked..
    header.classList.toggle('active');
    label.innerHTML = "by deafult checked";
  } else{
    label.innerHTML = "by deafult not checked";
  }

  checkbox.addEventListener( 'change', function() {
    if(this.checked) {
      // Checkbox is checked..
      header.classList.toggle('active');
      label.innerHTML = "is true";

    } else {
      // Checkbox is not checked..
      header.classList.toggle('active');
      label.innerHTML = "is false";
    }
  });
input[type=checkbox]:checked ~ #mobile-menu {
  color: white;
  background-color: magenta;
  transition: background-color 0.5s ease;
  font-style: normal;
  cursor: pointer;
} 

#header-nav.active{
  transition: background-color 0.5s ease;
  background: red;
}

label{
  cursor: pointer;
}
<nav id="header-nav">
  <ul>
    <li>
      <a>Nav item</a>
    </li>
    <li>
      <a>Nav item</a>
    </li>
    <!-- etc... -->
  </ul>
</nav>
<div id="mobile-menu-container">
  <div id="mobile-menu-div">
    <input name="hamburger" name="nav-trigger" type="checkbox" id="nav-trigger" checked/>
    <label id="mobile-menu-label" for="nav-trigger">Hello</label>
    <div id="mobile-menu">hamburger</div>
  </div>
</div>

by jquery

Use toggleClass() Method: https://www.w3schools.com/jquery/html_toggleclass.asp

Related StackOverflow Q: Jquery if checkbox is checked add a class

jQuery Traversing Methods

jQuery traversing, which means "move through", are used to "find" (or select) HTML elements based on their relation to other elements.

https://www.w3schools.com/jquery/jquery_ref_traversing.asp

Upvotes: 2

Related Questions