CSS animation works until is added

Question

This is an extreme simplification of what I'm doing with my website, but seems to be the root issue.

I have a <div> that I want to move when the user clicks some text. Borrowing from this example, I want to add an invisible <input> checkbox and an associated <label>.

The mentioned example has full functionality in my browser, but the animation in my code only works when the <label> is commented out. Is anyone else having this issue? Is there an error I'm missing? Thanks.

/*
input[type="checkbox"] {
  display: none;
}
*/

#page_euler {
  position: relative;
  background-color: gray;
  width: 200px;
  height: 200px;
  left: 0px;
  transition: all 0.5s;
}

.click:not(:checked)+#page_euler {
  left: 575px;
}

<input class="click" id="slide_euler" type="checkbox">

<!--
<label class="click" for="slide_euler">Click</label>
-->

<div id="page_euler"></div>

Here's the codepen

Quentin · Answer 1 · 2019-07-17T17:25:49.367

You are using a next sibling combinator (+).

If you uncomment the label, then the div is no longer the next sibling of the input.

Use a subsequent-sibling combinator (~) instead.

You also need to prevent .click:not(:checked) from matching the label.

/*
input[type="checkbox"] {
  display: none;
}
*/

#page_euler {
  position: relative;
  background-color: gray;
  width: 200px;
  height: 200px;
  left: 0px;
  transition: all 0.5s;
}

input.click:not(:checked)~#page_euler {
  left: 575px;
}

<input class="click" id="slide_euler" type="checkbox">

<label class="click" for="slide_euler">Click</label>

<div id="page_euler"></div>

He also has an issue with the class name, changing just that does not fix the problem. — zgood, Jul 17 '19 at 17:22

score 1 · Accepted Answer · answered Jul 17 '19 at 17:17

The + in your selector .click:not(:checked)+#page_euler requires the element #page_euler to be the next sibling element of your .click:not(:checked) element. When adding the label element in between the two, this is no longer the case.

Seeing you intend to hide the checkbox, you can simply move the label somewhere else and keep the checkbox element right in front of your div element, or you could add a + label to your selector, as demonstrated in this code snippet:

/*
input[type="checkbox"] {
  display: none;
}
*/

#page_euler {
  position: relative;
  background-color: gray;
  width: 200px;
  height: 200px;
  left: 0px;
  transition: all 0.5s;
}

.click:not(:checked) + label + #page_euler {
  left: 575px;
}

<input class="click" id="slide_euler" type="checkbox">
<label class="click" for="slide_euler">Click</label>

<div id="page_euler"></div>

score 0 · Answer 3 · answered Jul 17 '19 at 17:19

You have 2 issues.

1) You are using + in the .click:not(:checked) + #page_euler When you should probabl;y be using ~ like this: .click:not(:checked) ~ #page_euler.

The + is immediate sibling, not any sibling.

2) you are using click class for both your input and your label, I think you need a different class like checkbox on your input then update the selector to: .checkbox:not(:checked) ~ #page_euler

/*
input[type="checkbox"] {
  display: none;
}
*/

#page_euler {
  position: relative;
  background-color: gray;
  width: 200px;
  height: 200px;
  left: 0px;
  transition: all 0.5s;
}

.checkbox:not(:checked) ~ #page_euler {
  left: 575px;
}

<input class="click checkbox" id="slide_euler" type="checkbox">


<label class="click" for="slide_euler">Click</label>


<div id="page_euler"></div>

CSS animation works until is added

3 Answers3