less Parent selectors Select sibling elements that have the same class without repeating selector
Example
Less doesn't put any restrictions on the number of times the parent selector (&) can be used in a complex selector and so, we can use it more than once like in the below examples to select sibling elements without the need to repeat the selector.
.demo {
border: 1px solid black; /* add border to all elements with demo class */
& + & { /* select all .demo that have another .demo sibling immediately prior */
background: red;
}
& + & + & { /* select all .demo that have two .demo sibling immediately prior */
background: chocolate;
}
& ~ & { /* select all .demo elements that have another .demo sibling prior */
color: beige;
}
}
The above code when compiled will result in the following CSS:
.demo {
border-left: 1px solid black;
}
.demo + .demo {
background: red;
}
.demo + .demo + .demo {
background: chocolate;
}
.demo ~ .demo {
color: beige;
}
