can CSS access the input element identified by a label's for attribute?

Question

Suppose the for attribute of a label identifies an input. I would like to style the label based on the value attribute of that input. If they are adjacent this is easy: use an adjacent sibling selector. But I would prefer to follow the for attribute of the label. Possible?

Answer 1

In short – no.

The only way I can imagine doing what you're describing is as you mentioned – by using an adjacent selector / sibling selector. You need to reverse the typical html order of <label> and <input> to allow the selector input ~ label to work.

.field-container {
  display: flex;
  flex-direction: column-reverse;
  font-family: "Menlo", "Consolas", monospace;
}

input:focus ~ label {
  color: darksalmon;
}

<div class="field-container">
  <input id="cool-input" name="cool-input" />
  <label for="cool-input">Cool Input</label>
<div>