LESS nested elements

Question

I know that

div {
  a {
    ...
  }
}

in LESS will stand for

div a {
  ...
}

in CSS. The question is what is the LESS code for this:

div > a {
  ...
}

?

Answer 1

You can simply use

div {
  > a{
    color: blue;
  }
}

or

div {
  & > a{ /* & represents the current selector parent, so will be replaced with div in this case in the output */
    color: blue;
  }
}

Both have the same effect and would produce the following as compiled output.

div > a {
  color: blue;
}

Note: You can follow the same approach for the + (adjacent sibling combinator) and the ~ (general sibling combinator) also.