CSSで親セレクタとクラスセレクタを組み合わせるにはどうすればよいですか？

Question

divラッパーでは、ラジオボタンがいくつかあります。 1つが選択されると、そのラベルに特定の背景色を付けることを望みます。どのように具体的に私はこれのCSSルールにすることができますか？

HTML：

<div class="switch-wrapper"> 
    <form> 
     <input id="id-1" class="my-switch-on" type="radio" /> 
     <label for="id-1">Yes</label> 
     <input id="id-2" class="my-switch-off" type="radio" /> 
     <label for="id-2">No</label> 
    </form> 
</div> 

私の最も近いの推測：

div.switch-wrapper input[type="radio"].my-switch-on+label { 
    background-color: #000; 
} 

しかし、私はそれを動作させることはできません。確かに仕事

input[type="radio"]:checked + label { 
    background: #000; 
} 

が、私は、セレクタやクラスの他のタイプのプラスセレクターを組み合わせる方法を知りたい：私が代わりにやったことは、このでした。出来ますか？括弧でセレクタをグループ化できますか？例：

div.foo form.bar + div > span { 
    background-color: #000; 
} 

どのセレクタが優先されますか？ 2つ以上はできませんか？

私は主にバックエンドエンジニアリングを行い、フロントエンドは私の強い訴訟ではありません。任意のヒントやガイドライン、スペックへのリンクに感謝しました/私は/または短い答えが見つかりませんでした。 :)

Answer 1

This SO postセレクタ連想についてのあなたの特定の質問に答える必要があります。

もしあなたがHTMLをコントロールしていて、非常に精巧なセレクタを必要としているのであれば、代わりにHTMLを少し再構成するほうがよいでしょう。（これはセマンティクスとプレゼンテーションを分離するという理想に反しますが、HTMLとCSSは、

Answer 2

CSSで特定することは、別のルールを上書きしようとしている場合にのみ重要です。通常、クラスのような単純なものを使うのがベストです。

.my-switch:checked + label { 
 
    background: black; 
 
    color: white; 
 
}

<div class="switch-wrapper"> 
 
    <form> 
 
     <input id="id-1" class="my-switch my-switch-on" type="radio" name="onOf" checked /> 
 
     <label for="id-1">Yes</label> 
 
     <input id="id-2" class="my-switch my-switch-off" type="radio" name="onOf" /> 
 
     <label for="id-2">No</label> 
 
    </form> 
 
</div>