The & operator can be used to produce all possible permutation of selectors in a list separated by commas.

Combinatorial Explosion Example

Let's take an example to demonstrate the usage of combinatorial explosion parent selectors.

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

HTML file: simple.html

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <link rel="stylesheet" href="simple.css" type="text/css" />  
  5.   <title>Combinatorial Explosion Example</title>  
  6. </head>  
  7. <body>  
  8. <p>This is first paragraph.</p>  
  9. <p>This is second paragraph which is adjacent to first paragraph ( i.e. p + p ). This will be highlighted.</p>  
  10. <div>  
  11. This div is adjacent to second paragraph ( i.e. p + div ). This will be highlighted.  
  12. </div>  
  13. <p>This is third paragraph adjacent to div ( i.e. p + div ). This will be highlighted.</p>  
  14. <i>This is italic. This will not be highlighted since there is no (p + i) in CSS</i>  
  15. <div>This is second div</div>  
  16. <div>This is div adjacent to second div ( i.e. div + div ). This will be highlighted</div>  
  17. </body>  
  18. </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. p,  
  2. div {  
  3.   color: red;  
  4.   font-family: Lucida Console;  
  5. }  
  6. p + p,  
  7. p + div,  
  8. div + p,  
  9. div + div {  
  10.   color: brown;  
  11.   background-color: aqua;  
  12.   font-family: "Comic Sans MS";  
  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 Combinatorial explosion parent selectors1

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

For example:

Less Combinatorial explosion parent selectors2

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

  1. p,  
  2. div {  
  3.   color: red;  
  4.   font-family: Lucida Console;  
  5. }  
  6. p + p,  
  7. p + div,  
  8. div + p,  
  9. div + div {  
  10.   color: brown;  
  11.   background-color: aqua;  
  12.   font-family: "Comic Sans MS";  
  13. }  

Output:

Less Combinatorial explosion parent selectors3