CSSのみでradioボタン選択時に親要素を装飾する

例えばこういう構成だった時にinputの親要素であるdivを装飾したかった。

<div>
  <input id="foo" type="radio">
  <label for="foo">foo</label>
</div>

結論からいうとこのタグ構成で掲題の件を実現する方法はわからなかった...

radioボタン選択時は擬似クラス:checkedを利用することで実現可能。
ただ、セレクタの基準がradioボタンになるので親のdivを指定する方法が結局わからず...

https://developer.mozilla.org/ja/docs/Web/CSS/:checked

上記ページの例にあるようにinputタグをdivの兄弟要素にしてやれば、
隣接セレクタや間接セレクタで簡単に指定できる。

<input id="foo" type="radio">
<div>
  <label for="foo">foo</label>
</div>
input[type="radio"]:checked + div {
}

今回は、inputタグは表示させずlabel要素で表示を行ったので
構成変更しても特に支障は出なかったが支障がある場合はJSなどでやった方が賢明か。

[asin:B00M0ESXUI:detail]