less Parent selectors Basic parent selector


Example

The & operator is the parent selector. When used in or as a selector, it is replaced with the full parent selectors (entire sequence of selectors right upto to the topmost level of a nested block) in the final CSS output.

It is useful when creating nested rules that require using the parent selector in a different way than default, like changing the order of the parent selector placement or to concatenate it with other selectors.

a {
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

Results in the following CSS where the parent selector a was concatenated with the :hover rule:

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

One big advantage of using parent selectors wherever possible is the reduction of repetition of selectors.