On input focus change color of label. How?

Question

On input focus I want to change the color of the label element. How can I achieve this in less?

.control-label{
      color: @gray-light;
}
.controls{
  input,
  textarea{
    background-color:red; 
    &:focus{
      .control-label &{
        color: red;  //HERE
      }

    }
}

HTML:

<div class="control-group">
    <label class="control-label" for="inputEmail">Firstname</label>
    <div class="controls">
        <input type="text" id="inputEmail" placeholder="Firstname">
    </div>
</div>

Answer 1

One solution would be to use the :focus-within selector.

So, you'd do something like the below. Assuming that you always have an input of some description inside of a control-group, it will style the label whenever the input is focused on.

control-group {
    &:focus-within {
        control-label {
            color: red; 
        }
    }
}

More information can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

Answer 2

One solution would be to move the label below the input in the DOM but position them absolutely (to the parent) so the label looks to be above the input field:

<div>
  <input type="text"/>
  <label>Text</label>
</div>

In CSS move the label to the top, the input to the bottom:

label {
  position: absolute
  top: 0
}

input {
  position: absolute
  bottom: 0
}

And use the :focus state to change the style of the label:

input:focus + label {
    color: red
}

See example:

http://codepen.io/robcampo/pen/zGKLgg

On focus, the label turns red. No JS required.

Answer 3

I don't think you can without changing your HTML, see also: Is there any way to hover over one element and affect a different element?, your elements should be direct siblings. (LESS don't help to solve your problem here, LESS generate CSS and it seems impossible to do in CSS)

Possible suggestion:

input:focus + .control-label
{
    background-color:purple;
    color: red;
}
.controls > input
{
    float:right;
}	

<div class="controls">
    <input type="text" id="inputEmail" placeholder="Firstname">
    <label class="control-label" for="inputEmail">Firstname</label>
</div>

Or solve your problem with javascript: https://stackoverflow.com/a/20226218/1596547