Being on an summer break, I thought it could be nice to revive some very old questions answering to something with a today perspective. That's the case here:
In a similar situation, nowadays, you can obtain what you need without using javascript and leaving the html structure in your document just as it is by simply adding a new CSS rule, making use of the [`:has()` relational pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) which is being supported by all major browsers since the end of 2023 at least ([see](https://caniuse.com/css-has)).
<!-- begin snippet: js hide: false console: true babel: false babelPresetReact: false babelPresetTS: false -->
<!-- language: lang-css -->
p span.test { background-color: yellow; } p:has(span.test) + p { background-color: red; }
<!-- language: lang-html -->
<p> <span class="test">Foo</span> </p>
<p>Foo 2</p>
<!-- end snippet -->
So here the needed CSS rule is:
p:has(span.test) + p { background-color: red; }
That's it, simple like that and very easy (...today!)

Being on an summer break, I thought it could be nice to revive some very old questions answering to something with a today perspective. That's the case here:
In a similar situation, nowadays, you can obtain what you need without using javascript and leaving the html structure in your document just as it is by simply adding a new CSS rule, making use of the [`:has()` relational pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) which is being supported by all major browsers since the end of 2023 at least ([see](https://caniuse.com/css-has)).
<!-- begin snippet: js hide: false console: true babel: false babelPresetReact: false babelPresetTS: false -->
<!-- language: lang-css -->
div.col-md-1:has( > input:checked) + label {background-color: red;}
<!-- language: lang-html -->
<div class="col-md-1"> <input type="radio" name="name" value="alice" id="name-alice"> </div> <label for="name-alice">Alice</label> <div class="col-md-1"> <input type="radio" name="name" value="bob" id="name-bob"> </div> <label for="name-bob">Bob</label>
<!-- end snippet -->
So here the needed CSS rule is:
div.col-md-1:has( > input:checked) + label {background-color: red;}
That's it, simple like that and very easy (...today!)
Just a final note here: things will work as far as the `input` "paired" `label` always comes immediately following the relative class "`col-md-1`" `div`