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

Question

This question already has answers here:

if checkbox checked add class to parent element (4 answers)

Closed 3 years ago.

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.

Answer 2

try this :

html

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

css

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

input[type=checkbox]:checked + div p {
    background: blue;
}

demo