How do I in CSS combine a plus selector with parent and class? -

in div wrapper, have radio buttons. when 1 selected, wish make label have background color. how specific can in css rule this?

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> 

my closest guess:

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

but can't work. did instead this:

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

which work, i'd know how combine plus selector other types of selectors , classes. possible? can group selectors parenthesis? e.g.:

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

which selector has precedence? can't more one?

i backend engineering front-end isn't strong suit. grateful tips or guidelines, links specs didn't find an/or short answers. :)

this post should answer specific question selector associativity.

if have control on html , find needing highly elaborate selectors, it's better reorganize html instead (yes, goes against ideal of separating semantics , presentation, html , css have fallen far short in respect)