Changer parent div à l'entrée [type = case à cocher]: vérifié avec css

Question

Je peux comprendre comment faire le changement de div parent lorsque la case est cochée :( Changer le paragraphe suivant fonctionne très bien.

J'ai essayé cette approche sans succès dans 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

Aucun moyen de sélectionner un parent avec CSS uniquement (jusqu'à CSS4), vous devez donc utiliser JS ..

Voir cet article qui en parle ici .

Answer 2

essaye ça :

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;
}

démo