Less MP Selector

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

Multiple & Parent Selector

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.

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

strong>HTML file: simple.html

<!DOCTYPE html>  

<html>  

<head>  

    <title>Multiple & Example</title>  

 <link rel="stylesheet" href="simple.css" type="text/css" />  

</head>  

<body>  

<h2>JavaTpoint: A solution of all technology.</h2>  

<p class="select">It is possible to reference the parent selector by using &(ampersand) operator.</p>  

<p class="select_class1">It is possible to reference the parent selector by using &(ampersand) operator</p>  

</body>  

</html> 

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

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

For example:

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: