ラジオボタンの選択に基づいてCSSとのリンクを表示/非表示にする

Question

現在チェックされているラジオボタンに従ってハイパーリンクを表示/非表示しようとしています。これは、<ul><li>要素内にラジオボタンをラップするまで機能しています。

CSS

.site { 
    opacity: 0; 
    height: 0px; 
    -moz-transition: opacity .5s ease-in-out, height .5s ease-in-out,background .5s ease-in-out; 
    -webkit-transition: opacity .5s ease-in-out, height .5s ease-in-out,background .5s ease-in-out; 
    transition: opacity .5s ease-in-out, height .5s ease-in-out,background .5s ease-in-out; 
} 
input[id=rbSites]:checked ~.site { 
    opacity: 1; 
    height: 15px; 
} 

HTML

<input type="radio" id="rbSites" name="types"> 
<label for="supportCase">Sites</label> 
<input type="radio" id="rbOther" name="types"> 
<label for="other">Other</label> 
<div class="cell site">Link to</div> 
<a class="site">SiteX</a> 
<a class="site">SiteY</a> 
<a class="moblie">AppX</a> 

上記停止し、このように、とすぐにラジオボタンが<ul><li>要素内にラップされているとして働い：

<ul> 
    <li> 
    <input type="radio" id="rbSites" name="types"> 
    <label for="supportCase">Sites</label> 
    <input type="radio" id="rbOther" name="types"> 
    <label for="other">Other</label> 
    </li> 
<ul> 

jsFiddle without <ul><li>およびwith <ul><li>を参照してください。

Answer 1

.siteはもはや兄弟ではないため、ラジオボタンが<ul><li>の中にラップされると、~.siteセレクタは機能しません。

追加の親セレクタ（<ul>を選択してから~.siteを選択する）または特定の要素（チェックされたラジオボタン）を持つ要素（<ul>）を選択する方法が必要です。

残念ながら、私は両方のオプションがCSS4でのみ利用可能であることを恐れています。また、thisとthis答えを参照してください。