Less.js Variables Combinatorial Explosion

Last Updated : 28 Apr, 2025

LESS works as an extension to the regular CSS and gives it some additional features to work with. , which is used to generate all possible combinations of the selector's list which are separated by a comma.

In this article, we are going to learn about the combinatorial explosion which is available in Less.js.

Syntax:

& + & {
    <css-property> : value;
}

Parameter:

It does not accept any parameters.

Example 1: In this example, we will generate all possible selector combinations of p and h2 elements and apply the text color to the contents of the respective elements, using the combinatorial explosion.

index.html:

HTML

<!DOCTYPE html>
<html lang="en">
<head>   
    <title>Variable Combinatorial explosion</title>
    <style>
        p, h2 {
            font-style: italic;
        }
        p + p,
        p + h2,
        h2 + p,
        h2 + h2 {
            color: green;
        }
    </style>
</head>

<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>Variable Combinatorial explosion</h2>    
    <p>GeeksforGeeks</p>
</body>
</html>

style.less:

CSS

p, h2 {
    font - style: italic;
    & + & {
        color: green;
    }
}

Now, to compile the above LESS code to CSS code, run the following command:

lessc style.less style.css

The compiled CSS file comes to be:

style.css:

CSS

p,
    h2 {
    font - style: italic;
}
p + p,
    p + h2,
    h2 + p,
    h2 + h2 {
    color: green;
}

Output:

Example 2: In this example, we will use more than two selectors to generate all possible combinations of p, h2, li elements and apply the green color to them by using combinatorial explosion.

index.html:

HTML

<!DOCTYPE html>
<html lang="en">
<head>  
    <title>Variable Combinatorial explosion</title>
    <style>
        p,
        h2,
        li,
        a {
            font-style: italic;
        }
        p + p,
        p + h2,
        p + li,
        p + a,
        h2 + p,
        h2 + h2,
        h2 + li,
        h2 + a,
        li + p,
        li + h2,
        li + li,
        li + a,
        a + p,
        a + h2,
        a + li,
        a + a {
            color: green;
        }
    </style>
</head>
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2> This is heading 2 </h2>
    <p>This is paragraph</p>
    <li>list item 1</li>
    <li>list item 2</li><br/>
    <a href="www.geeksforgeeks.com">GeeksforGeeks</a>
</body>
</html>

style.less:

CSS

p, h2, li, a {
    font-style: italic;
    & + & {
        color: green;
    }
}

Now, to compile the above LESS code to CSS code, run the following command:

lessc style.less style.css

The compiled CSS file comes to be:

style.css:

CSS

p,
h2,
li,
a {
    font-style: italic;
}
p + p,
p + h2,
p + li,
p + a,
h2 + p,
h2 + h2,
h2 + li,
h2 + a,
li + p,
li + h2,
li + li,
li + a,
a + p,
a + h2,
a + li,
a + a {
    color: green;
}

Output:

Reference: https://lesscss.org/features/#parent-selectors-feature-combinatorial-explosion

Less.js Browser Modify Variables

iamgaurav

Improve

Article Tags :

Less.js Variables Combinatorial Explosion

Similar Reads

Thank You!

What kind of Experience do you want to share?