4

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;
}
seven-phases-max
  • 11,612
  • 1
  • 43
  • 57
user2726041
  • 349
  • 3
  • 18

1 Answers1

6

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;
}
Community
  • 1
  • 1
chazsolo
  • 7,429
  • 1
  • 18
  • 42
  • What is there are more deeply nested structures such as there are great-grandparent where `div`s are nested inside of `span` element where `span` element is nested inside of `div` element? How do you target those using LESS? Thank you in advance. – NikolaS Aug 09 '21 at 14:02