CSSでチェックされていないラジオボタンしか表示されない

Question

このプロジェクトには、javascriptを使用できないという特殊性があります。要点は、チェックされていないラジオボタンに関連するコンテンツをすべて非表示にすることです。ページが読み込まれた後、すべてのコンテンツが表示されますが、1つのラジオボタンのコンテンツが選択された後、他のすべてのラジオボタンが消えるようにする必要があります。

これは私のマークアップです：

 <label> 
 
       <input type="radio" name="group1" value="1" /> 
 
       <div class="radio-sample"> 
 
        <img src="http://placehold.it/150x150"> 
 
        <div class="con"> 
 
         <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." 
 
          "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</p> 
 
         <div type="button" class="btn btn-primary pull-right">1Primary</div> 
 
        </div> 
 
       </div> 
 
      </label> 
 

 
      <label> 
 
       <input type="radio" name="group1" value="2" /> 
 
       <div class="radio-sample"> 
 
        <img src="http://placehold.it/150x150"> 
 
        <div class="con"> 
 
         <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." 
 
          "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</p> 
 
         <div type="button" class="btn btn-primary pull-right">2Primary</div> 
 
        </div> 
 
       </div> 
 
      </label> 
 
      <label> 
 
       <input type="radio" name="group1" value="3" /> 
 
       <div class="radio-sample"> 
 
        <img src="http://placehold.it/150x150"> 
 
        <div class="con"> 
 
         <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." 
 
          "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</p> 
 
         <div type="button" class="btn btn-primary pull-right">2Primary</div> 
 
        </div> 
 
       </div> 
 
      </label>

Answer 1

~（兄弟）セレクタで:checked擬似クラスを使用します。入力がすべてになるので、しかし

input[type=radio]:checked ~ div.radio-sample { 
    display: none; 
} 

最初にチェックを外すと、すべてのコンテンツが非表示になります。唯一の解決策は、ラジオボタンは、すべての最初に確認されているように、すべてのHTMLを設定することです：

は

<input type="radio" checked="checked" /> 

...その後、ユーザーがチェックし、その内容非表示になります他人1を選択した後。

Answer 2

:not(:checked)を使用すると、チェックされたセレクタを反転できます。

は、ここで例にのみCSSを使用できません

input[type=radio]:not(:checked)~.radio-sample { 
 
    display: none; 
 
}

<label> 
 
    <input type="radio" name="group1" value="1" /> 
 
    <div class="radio-sample"> 
 
    <img src="http://placehold.it/150x150"> 
 
    <div class="con"> 
 
     <p>Number 1</p> 
 
     <button>Primary button 1</button> 
 
    </div> 
 
    </div> 
 
</label> 
 

 
<label> 
 
    <input type="radio" name="group1" value="2" /> 
 
    <div class="radio-sample"> 
 
    <img src="http://placehold.it/150x150"> 
 
    <div class="con"> 
 
     <p>Number 2</p> 
 
     <button>Primary button 2</button> 
 
    </div> 
 
    </div> 
 
</label> 
 

 
<label> 
 
    <input type="radio" name="group1" value="3" /> 
 
    <div class="radio-sample"> 
 
    <img src="http://placehold.it/150x150"> 
 
    <div class="con"> 
 
     <p>Number 3</p> 
 
     <button>Primary button 3</button> 
 
    </div> 
 
    </div> 
 
</label>