Changing div css properties through input:checked

Asked Jun 20 '16 at 10:21

Active Jun 20 '16 at 10:52

Viewed 78 times

I'm trying to change the width and height of a div on the click of a checkbox (#navigation). I know I can change other elements like span through

#navigation input:checked ~ span { }

but when I try

#navigation input:checked { }

I don't get the same result. Is there a way of doing this through css or am I out of luck?

My html would be as follows...

<nav id="navigation">
 <input type="checkbox" />
 <ul><li>heading1</li><li>heading2</li><li>heading3</li></ul>
</nav>

edited Jun 20 '16 at 10:52

asked Jun 20 '16 at 10:21

Max Power

@Paulie_D What do you mean? I've provided a simplified code snippet, haven't I? – Max Power Jun 20 '16 at 10:31
1

There's no HTML.....CSS doesn't tell the whole story. I'm suspecting you have a "Parent Selector" issue. – Paulie_D Jun 20 '16 at 10:35
@Paulie_D Alright, updated. Yes it is a parent does this mean it isn't possible? – Max Power Jun 20 '16 at 10:43
That's right...you can't affect the parent by doing something with the child. - http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector?rq=1 You'd need Javascript – Paulie_D Jun 20 '16 at 10:44
Thanks Paulie at least I know what's wrong now. – Max Power Jun 20 '16 at 10:52

0 Answers0