LESS - Parent Selector

Parent selectors are used to selecting the parent elements in nested selectors of LESS code.

let’s see the simple example

<div class="parent">
  <div class="child"</div>
</div>

You want to apply the styles to the child element using the parent selector. So we have to use the & operator to select the parent selector.

here is a less code

.parent{
  color:blue;
  & .child{
    color:green;
  }
}

Generated CSS

.parent {
  color: blue;
}
.parent .child {
  color: green;
}

Parent selectors can be used with class or pseudo-class

And also we can change the parent selector order with append & in the last. The same can be rewritten using & the operator.

.child{
  color:blue;
  .parent & {
    color:green;
  }
}

Generated CSS

.child {
  color: blue;
}
.parent .child {
  color: green;
}

pseudo parent selectors example

pseudo-classes are used to attach events with CSS.

Anchor tag has hover class

a{
  color:blue;
  &:hover{
    color:green;
  }
}

Generated CSS

a {
  color: blue;
}
a:hover {
  color: green;
}

Nesting and parent selectors are important in Preprocessor to have a clean code with the hierarchy of like dom tree in CSS.