CSS transitions with the "checked" hack

Question

I'm trying to do something similar with this example by using the "checked" hack

input[type=checkbox]:checked ~ label .box { 
  opacity:0;
  -webkit-transform   :scale(0) rotate(-180deg);
  -moz-transform      :scale(0) rotate(-180deg);
  transform           :scale(0) rotate(-180deg);
}

http://codepen.io/anon/pen/KVWWjy

However, I need to change the html code so that the label tag is before the input tag. When I move the input in the bottom the effects stop working. how can I fix this?

No idea we could PM here lol. PM me and I'll reply ...I guess you learn something new every day — LOTUSMS, Jan 06 '16 at 01:30
With a little CSS beautification in a separate question, you can get the animations. But at least your input after label conundrum will be solved — LOTUSMS, Jan 06 '16 at 01:36
Here. If you need help with the CSS animations, open up a new question and make sure it doesn't sound anything like other ones or even this one. Because , even though is a different problem, they'll flag it - http://codepen.io/anon/pen/obZWPx — LOTUSMS, Jan 06 '16 at 01:37

score 0 · Accepted Answer · edited May 23 '17 at 10:28

There is no previous sibling selector in CSS. If it there was, CSS would be a lot slower. There has been a lot of debate on this subject and it won't happen in any foreseeable future.

As chowey very well put it:

CSS selectors are designed to be easy (fast) to implement for the browser. The document can be traversed once, matching elements as you go, with no need to ever go backward to adjust a match

Simply put, you'll have to change your markup. You can't make CSS look backwards. It only looks forward.

For more info on the subject, see this question.

score 0 · Answer 2 · answered Jan 06 '16 at 00:40

0

With css this is impossible as you cannot traverse up, the selector you use only looks at the next siblings it dosent work backwards. For this to work you'd have to use Javascript.

answered Jan 06 '16 at 00:40

Antonio Smoljan

2,187
1
12
11

CSS transitions with the "checked" hack

2 Answers2