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; } |
Output:
Reference: https://lesscss.org/features/#parent-selectors-feature
