Изменить родительский div на входе [type = checkbox]: отмечен css

Я могу выяснить, как изменить родительский div, когда установлен флажок:( Изменение нижеследующего абзаца отлично работает.

Пробовал этот подход без удачи в 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/

Ответ 1

Невозможно выбрать родителя только с CSS (до CSS4), поэтому вы должны использовать JS..

Смотрите это сообщение, говоря об этом здесь.

Ответ 2

попробуйте следующее:

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

демо