I just wanted to make sure that the following is not possible in CSS, and that I indeed have to use Js for this (I cannot think of any way of doing it in CSS). Let's say you have this markup:

<div id="first" class="first-container">
<label for="field-one">First Field</label>
<input type="text" id="field-one" required=""/>
</div>
<p id="second" class="subsquent-container">
</p>

What I want to do is style #second in a specific way only if #field-one has the required="" attribute on it.

The currently best way to do this I could think of is to scan through all of the .first-container of the page in javascript, check if their input child has the required="" attribute on it, and if so, add a class to the subsequent .subsequent-container.

Does anyone see a CSS - only solution? Would definitely be preferred. Note: This issue is due to the way a software generates constant markup; so changing the markup is not an option (I know, I know...).