How to add css of a div when checkbox checked?

Question

The Code:

#menu-open:checked ~ .logoib {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

<div id="logo" class="logoib"></div>

<input type="checkbox" id="menu-open">

<nav class="menu-list">
  <a href="#" class="firsta">Home</a>
  <a href="#">My Works</a>
  <a href="#">Contact</a>
</nav>

<label for="menu-open" class="modmenu logoib">
  <span></span>
</label>

I want to add some CSS of #logo when the checkbox of menu is checked.

In this context you can't. You have to either settle for using javascript or place the input earlier in the DOM (before the #logo element) — Joseph Marikle
– Joseph Marikle, Commented Apr 5, 2016 at 21:32

indubitablee · Accepted Answer · 2016-04-05 21:32:59Z

4

css cant affect anything before it, it can only affect stuff after the targeted element change like below

#menu-open + #logo {
  color: #ccc;
  font-style: italic;
} 
#menu-open:checked + #logo {
  color: #f00;
  font-style: normal;
}

<input type="checkbox" id="menu-open">
<div id="logo" class="logoib">
  my logo here
</div>

<nav class="menu-list">
  <a href="#" class="firsta">Home</a>
  <a href="#">My Works</a>
  <a href="#">Contact</a>
</nav>

<label for="menu-open" class="modmenu logoib">
  <span></span>
</label>

answered Apr 5, 2016 at 21:32

indubitablee

8,2262 gold badges27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Iustin Beceneagă Over a year ago

I tried to move up the input code, it works, but then css of menu-list doesn't

Lulylulu · Accepted Answer · 2016-04-05 21:40:06Z

1

You could use pure JS, JQuery or CSS.

Here is a pure JS solution. If you want to set it also on load, you could call myFunction when the DOM is ready.

function myFunction() {
  var cb = document.getElementById('menu-open');
  var logo = document.getElementById('logo');

  if (cb.checked) {
    logo.setAttribute("class", "newClass");
  } else {
    logo.removeAttribute("class");
  }
}

#menu-open:checked~.logoib {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}
.newClass {
  color: red;
}

<div id="logo" class="logoib">Logo

</div>
<input type="checkbox" id="menu-open" onchange="myFunction()">

<nav class="menu-list">
  <a href="#" class="firsta">Home</a>
  <a href="#">My Works</a>
  <a href="#">Contact</a>
</nav>

<label for="menu-open" class="modmenu logoib">
  <span></span>
</label>

answered Apr 5, 2016 at 21:40

Lulylulu

1,2648 silver badges17 bronze badges

2 Comments

Iustin Beceneagă Over a year ago

Thank you LuLylulu, it works AWESOME :d thank you all

Lulylulu Over a year ago

glad I could help :)

Collectives™ on Stack Overflow

How to add css of a div when checkbox checked?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related