Question

I have a HTML structure as follows:

<div class="container">
  <label>Name:</label>
  <div class="controls">
    <input type="text" class="formatted-input"></input>
  </div>
</div>

I only have access to the “formatted-input” class. I need a way to travel from that class to the label in the outter-most parent and apply format to it. Is this possible using LESS CSS?

I’ve come up with something like this:

.container .formatted-input
{
  & & > label {
    color: yellow;
  }
}

but it does not work. Any suggestions?

Thanks!

Answer 1

LESS is just CSS with a syntactic sugar glaze.

It looks like you just want to get the following selectors:

• .container label
• .container .formatted-input

If you want them to be clustered together, then you need to organize around the commonality, which is .container in this case:

.container {
    label {...}
    .formatted-input {...}
}