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.
