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)).
Remember, you'll have to always start your CSS rules from the "`.menu-wrap` class `<div>`" to look into for a match when the "`#link1 <input>`" is `checked`, and then go on to the "`.content-wrap` class `<div>`" to look at for the "`#link1-content <input>`", 'cause those are the elements at the right level of the DOM tree from where you can "move back and forth" for the matching in the case here.
<!-- begin snippet: js hide: false console: true babel: false babelPresetReact: false babelPresetTS: false -->
<!-- language: lang-css -->
.menu-wrap:has(#link1:checked) ~ .content-wrap #link1-content { display: none;}
<!-- language: lang-html -->
<div class="wrapper"> <div class="menu-wrap"> <ul> <li> <input type="radio" id="link1" /> </li> </ul> </div>
<div class="content-wrap"> <div id="link1-content"><p>Just a paragraph</p></div> </div> </div>
<!-- end snippet -->
So here the needed CSS rule is:
.menu-wrap:has(#link1:checked) ~ .content-wrap #link1-content { display: none;}
P.S. Just let me note that maybe an `<input>` of type `checkbox` would make more sense than a `radio` one here IMHO...

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 -->
.Form FormField .FormLabel:has( + .FormInput > .InputField > input:focus) { border: 1px solid green; }
<!-- language: lang-html -->
<form class="Form"> <FormField> <label class="FormLabel">I need to apply styles to FormLabel when input is focused.</label> <div class="FormInput"> <div class="InputField"> <input type="text" /> </div> </div> </FormField> </form>
<!-- end snippet -->
So here the needed CSS rule is:
.Form FormField .FormLabel:has( + .FormInput > .InputField > input:focus) { ... }
That's it, simple like that and very easy (...today!)