CSS transition on div triggered by inner checkbox

Question

I have the following simple example where I animate the position of a given div through CSS's transition directive (http://jsfiddle.net/rtubio/dmhqjhd3/):

<input type='checkbox' id='toggle' class='toggle' />
<label for='toggle'></label>

<div id='area' class='area'>
    <div id='area-title' class='area-title'></div>
</div>

... and I have the associated CSS code (see the JSFiddle) that animates the translation of the div -50px towards the bottom of the page whenever the label of the checkbox is clicked. If I move the checkbox+label to the inside of the div that I am trying to animate:

<div id='area' class='area'>
    <div id='area-title' class='area-title'>
        <input type='checkbox' id='toggle' class='toggle' />
        <label for='toggle'></label>
    </div>
</div>

... the animation stops working (see this second JSFiddle with the non-working example: http://jsfiddle.net/rtubio/k5o0uggu/). I have been looking for possible incompatibilities, but I have found none.

Does CSS have any restriction for this case?

`~` is a sibling selector, but your `label` is a child of `.area`, not a sibling. — TheFrozenOne, Oct 01 '14 at 21:43
possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Andy Mercer, Oct 01 '14 at 21:45
Short answer, you cannot do it, because there are no parent selectors. — Andy Mercer, Oct 01 '14 at 21:45

score 2 · Accepted Answer · answered Oct 01 '14 at 22:32

Yes, CSS has a restriction that sibling combinators (+ and ~) can 'see' only following siblings of DOM element, i.e. elements that are direct children of the parent of given element and come later in the source order than this element. CSS can't select ancestors of the element. So you have to leave your checkbox outside and before .area to keep it possible to control .area by :checked state of the checkbox.

But since your checkbox is invisible and label transfers the clicks to it regardless its position in the DOM, you can move only label inside .area and modify your selectors respectively, e.g.

.toggle + div label {
    text-align: center;
    display: block;
    position: relative;
}

.toggle + div label:after {
    content: '(hide)'; 
}

.toggle:checked + div label:after {
    content: '(show)';
}

See edited fiddle

score 0 · Answer 2 · answered Oct 01 '14 at 21:48

0

Your problem is .toggle:checked ~ .area as you have placed .toggle within .area it has nothing to change the position on if you place another div below add a class and change the css to

.toggle:checked ~ .newclass

everything should work

answered Oct 01 '14 at 21:48

Dava Gordon

182
1
6

CSS transition on div triggered by inner checkbox

2 Answers2