Javascript-форум - Изменение цвета блока с помощью radio

Всем здравствуйте! У меня новый вопрос.
Сегодня я решил сделать div, который будет меняться при изменении выбранного radio. Вот сам код:

<!DOCTYPE html>
<html>
<head>
<title>Изменение цвета блока</title>
<meta charset="UTF-8">
<style>
.white:checked ~ .block {
background: white;
}
.black:checked ~ .block {
background: black;
}
.gray:checked ~ .block {
background: #3F4344;
}
.white2:checked ~ .block {
color: white;
}
.black2:checked ~ .block {
color: black;
}
.gray2:checked ~ .block {
color: #3F4344;
}
</style>
</head>
<body>
<hr>
<span>Фон:</span>
<input type="radio" name="change" class="white" checked>
<input type="radio" name="change" class="black">
<input type="radio" name="change" class="gray">
<hr>
<span>Текст:</span>
<input type="radio" name="change2" class="white2" checked>
<input type="radio" name="change2" class="black2">
<input type="radio" name="change2" class="gray2">
<hr>
<div class="block">Блок</div>
</body>
</html>

Вроде всё работает и возникает вопрос — в чём же вопрос? Я обнаружил две очень досадные вещи, работая с checkbox и radio:
1)Если наши radio (checkbox) обёрнуты в какой либо тег (кроме html и body), то при изменении radio (checkbox) стили не работают;
2)Если radio (checkbox) в коде стоят после элемента, который необходимо изменить, то стили также не срабатывают.
Я хотел бы узнать, как можно изменить цвет блока при выборе другого radio (input type radio должен быть обернут в div), если можно найти решение на CSS, буду рад, но и против js не имею ничего против.