In Less, the & operator is used to refer a parent selector repeatedly without using it name. So the multiple & parent selector specifies that within a selector & operator can be used more than once.

Multiple & Example

Let's take an example to demonstrate the usage of multiple & parent selectors.

Create a HTML file named "simple.html", having the following data.

strong>HTML file: simple.html

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Multiple & Example</title>  
  5.  <link rel="stylesheet" href="simple.css" type="text/css" />  
  6. </head>  
  7. <body>  
  8. <h2>JavaTpoint: A solution of all technology.</h2>  
  9. <p class="select">It is possible to reference the parent selector by using &(ampersand) operator.</p>  
  10. <p class="select_class1">It is possible to reference the parent selector by using &(ampersand) operator</p>  
  11. </body>  
  12. </html>  

Now create a file named "simple.less". It is similar to CSS file. The only one difference is that it is saved with ".less" extension.

LESS file: simple.less

  1. .select + .select {  
  2.   color: pink;  
  3. }  
  4. .select .select {  
  5.   color: blue;  
  6. }  
  7. .select.select {  
  8.   color: red;  
  9. }  
  10. .select,  
  11. .select_class1 {  
  12.   color: green;  
  13. }  

Put the both file "simple.html" and "simple.less" inside the root folder of Node.js

Now, execute the following code: lessc simple.less simple.css

Less

This will compile the "simple.less" file. A CSS file named "simple.css" will be generated.

For example:

Less

The generated CSS "simple.css", has the following code:

  1. .select + .select {  
  2.   color: pink;  
  3. }  
  4. .select .select {  
  5.   color: blue;  
  6. }  
  7. .select.select {  
  8.   color: red;  
  9. }  
  10. .select,  
  11. .select_class1 {  
  12.   color: green;  
  13. }  

Output:

Less