How to add a style if the parent has a sibling with a specific id using only CSS

Question

Given this code below, how can I add a border color in the input element if the parent has a sibling with this ID "message"?

<div>
  <input class="red"/>
</div>
<div id="message">
  Error message
</div>

I can't use JS in this case, only CSS. Thank you.

Answer 1

You could use :has with the selector div:has( + div#message) > input:

div:has( + div#message) > input {
  border: solid 2px red;
}

<div>
  <input class="red" />
</div>
<div id="message">
  Error message
</div>