Selecting Element In Parent Using LESS CSS

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!

why why why why??? look here: http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — thatidiotguy, Nov 28 '12 at 17:36
LESS only compiles to normal, valid, standard CSS - so if it can't be done in CSS it can't be done with LESS (and a "parent/previous-sibling selector" can't be done with CSS currently). — Wesley Murch, Nov 28 '12 at 17:38

score 0 · Accepted Answer · answered Nov 28 '12 at 17:38

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 {...}
}

Selecting Element In Parent Using LESS CSS

1 Answers1