Less.js Parent Selectors

Last Updated : 22 Aug, 2022

The Parent Selectors in LESS.js are used to select elements with the specific parents when modifying an existing class or pseudo-class to an existing selector. It is denoted by the ‘&’ (ampersand) operator. It is important in the pre-processor to have a clean code with the hierarchy of like DOM tree in CSS.

Different types of Parent Selectors: Following is the list of different types of parent selectors:

Multiple &: It represents the nearest selector and parent selectors too. Within the selector, the & may appear more than once. For this, we can refer to the parent selector repeatedly without repeating the same name.
Changing Selector Order: It is used to change the selector order when prepending a selector to the Parent selector. For this, we need to specify the & after the current selector.
Combinatorial Explosion: It can produce all the possible permutations of the selectors in a list, separated by commas.

Syntax:

a{
 color:blue;
 &:hover{
   color:green;
 }
}

Example-1: This example describes the LESS.js Parent Selectors by specifying the & operator that denotes the parent selectors of a nested rule.

HTML

<!DOCTYPE html> 
<html lang='en'> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1"> 
    <link rel="stylesheet" 
          type="text/css" 
          href="main.css"> 
    <title>LESS-Parent Selector</title> 
</head> 
  
<body> 
    <h1>How Parent Selectors are used in LESS</h1> 
    <div> 
        <p class='Select-first'> 
            We are going to create basic list items with 
            links and use of selector to style it accordingly. 
        </p> 
  
        <ul class='Select-second'> 
            <li> 
                  <a>Learn html at your own pace</a> 
              </li> 
            <li> 
                  <a>Learn CSS at your own pace</a> 
              </li> 
            <li> 
                  <a>Learn Javascript at your own pace</a> 
              </li> 
            <li> 
                  <a>Learn React at your own pace</a> 
              </li> 
        </ul> 
    </div> 
</body> 
</html>

main.less

h1{ 
    background-color: blue; 
    color: white; 
} 
  
.Select-first{ 
    background-color: yellow; 
    font-family: Tahoma; 
} 
  
.Select-second{ 
    color: #000; 
    background-color: lightgreen; 
    a{ 
    color: white; 
    &:hover{ 
    color: black; 
    } 
    } 
}

Now, compile the less code using the following lessc command to generate a CSS file.

lessc main.less main.css

main.css

h1 { 
  background-color: blue; 
  color: white; 
} 
.Select-first { 
  background-color: yellow; 
  font-family: Tahoma; 
} 
.Select-second { 
  color: #000; 
  background-color: lightgreen; 
} 
.Select-second a { 
  color: white; 
} 
.Select-second a:hover { 
  color: black; 
} 

Note: command for compiling less file to CSS is:

lessc (name of less file) (name of the css file)

Output:

Example-2: This is another example that describes the LESS.js Parent Selectors.

HTML

<!DOCTYPE html> 
<html lang='en'> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1"> 
    <link rel="stylesheet" 
          type="text/css" 
          href="main2.css"> 
    <title>Parent Selector Demo in LESS</title> 
</head> 
  
<body> 
    <h1>Another example for Parent selector in LESS</h1> 
    <div class='onlySelectors'> 
        <p> 
            Only the direct child of  
            <a href='#'> element will be selected</a> 
        </p> 
    </div> 
    <p> 
        Nothing gets selected because it is not  
        the direct child of div elements 
    </p> 
</body> 
</html>

main2.less

h1{ 
    font-family: Tahoma, sans serif; 
    color: blue; 
} 
.onlySelectors p { 
    background-color: skyblue; 
    color: #000; 
    font-size:20px; 
  
a{ 
    color:red; 
    &:hover{ 
    color:white; 
    } 
}     
}

main2.css: Compile and generate the CSS file, which looks like this:

main2.css

h1 { 
  font-family: Tahoma, sans serif; 
  color: blue; 
} 
.onlySelectors p { 
  background-color: skyblue; 
  color: #000; 
  font-size: 20px; 
} 
.onlySelectors p a { 
  color: red; 
} 
.onlySelectors p a:hover { 
  color: white; 
} 