2つの異なる要素を1つの値に基づいてスタイル付けするにはどうすればよいですか？

Question

私が作成していクイズのカスタムスタイルのラジオ・ボタンのセットを持っています。 「正常」状態は正常に表示されますが、問題は「チェック済み」状態のスタイル（色）を変更することです。

新しくスタイル「の選択肢」のそれぞれは、2スパンのカラーボックスとホワイトボックスに表示するテキストで表示する番号を許容するために含まれています。 「選択」がクリックされたとき、それのような色のナンバリングボックスの変更は必要がありますが、同時に、第2スパンの境界線の色を変更する方法を見つけ出すことができないように、私はそれを持っています。あなたは、私がここで意味を正確に何を見ることができます

：https://jsfiddle.net/2cs9n7yo/

は基本的に私は.LEFT-COLと.RIGHT-COLの両方の中に色特性の値を変更できるようにしたい - .LEFT-colが正常に動作します私は同じ方法でそれを設定しようとしたときだけでなく、正しい方法でそれを行う方法がわからない、それは正しく動作しませんでした。チェックに基づいて2つの異なる要素内のプロパティを変更する方法はありますか？

/*This part works*/ 
.container input:checked + .left-col{ 
    background:#a20067; 
    border:2px solid #a20067; 
} 

/*This doesn't do anything*/ 
.container input:checked + .right-col{ 
    border:2px solid #a20067; 
} 

ありがとうございます！

Answer 1

+はadjacent sibling selectorです。選択された入力に隣接していないので、.right-colの~セレクタを使用する必要があります。 はgeneral sibling selectorで、:checked要素の後にある.right-colを選択します。

.container input:checked ~ .right-col{ 
    border:2px solid #a20067; 
} 

https://jsfiddle.net/2cs9n7yo/1/