Change parent div on input[type=checkbox]:checked with css [duplicate]

Question

I can figure out how to make the parent div change when checkbox is checked :( Changing the following paragraph works fine.

Tried this approach without luck in Chrome:

HTML

​<div>     <input type="checkbox​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​" checked>     <p>Test</p> </div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

CSS

div {     background: pink;     width: 50px;     height:50px; } div + input[type=checkbox]:checked {   background: green; }  input[type=checkbox]:checked + p {     background: blue; } 

​ http://jsfiddle.net/lajlev/3xUac/

Answer 1

No way to select a parent with CSS only (until CSS4), so you must use JS..

See this post that talking about it here.