LESS: Target a parent element if it exists

Question

So I have a box:

<div class="box">Box</div>

And sometimes this box may be wrapped in an a tag:

<a href="#"><div class="box">Box in an A tag</div></a>

Is there a way in LESS to specifically target A tags that are parents of .box?

e.g.

a {
   color: red;
}

a [that is a parent of .box] {
   color: blue;
}

If there is in LESS, you can't select parent element in CSS. So you can't apply css to parent — Justinas, Jun 09 '16 at 12:28

score 4 · Answer 1 · edited May 23 '17 at 12:31

No, you cannot select ancestor elements using LESS or CSS, but LESS has what is called the parent selector, or &.

The & operator represents the parent selectors of a nested rule and is most commonly used when applying a modifying class or pseudo-class to an existing selector

So, in your case, instead of changing the color of the parent, you could use & to target instances of .box that have an a parent, e.g.

.box {
  color: red;

  a & {
    color: blue;
  }
}

This translates to:

.box {
  color: red;
}
a .box {
  color: blue;
}

LESS: Target a parent element if it exists

1 Answers1