Less.js Extending Nested Selectors
Last Updated :
28 Apr, 2025
LESS is a simple CSS pre-processor that makes it possible to create manageable, customizable, and reusable style sheets for websites. LESS is a dynamic style sheet language that increases the working power of CSS. LESS is cross-browser compatible. CSS pre-processor is a scripting language that improves CSS and gets compiled into regular CSS syntax so that the web browser can use it. This also provides functionalities like variables, functions, mixins, and operations that enable us to build dynamic CSS.
Extend: LESS Extend is a pseudo-class that helps to merge different selectors, based on putting it with one that matches according to what it is referenced. We can use the LESS extend feature using the :extend keyword.
Extending Nested Selectors: Nested selectors are matched using extend selector.
Syntax:
.selector:extend(.bucket tr) {}
.container:extend(.bucket td) {}
Example 1: The following example demonstrates the use of Less.js Extending Nested Selectors in the Less file.
HTML
<!doctype html>
<head>
<link rel="stylesheet" href="style.css"
type="text/css" />
</head>
<body>
<div><br><br>
<h1 class="container"><b>
GeeksforGeeks</b></h1>
<h2 class="selector"><b>
Example of Extending Nested Selectors</b></h2>
</div>
</body>
</html>
style. less: Create the Less file
CSS
.bucket {
tr {
color: black;
font-family: Arial, Helvetica, sans-serif;
}
td {
color:green;
font-family:"Comic Sans MS";
}
}
.selector:extend(.bucket tr) {}
.container:extend(.bucket td) {}
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
.bucket tr,
.selector {
color: black;
font-family: Arial, Helvetica, sans-serif;
}
.bucket td,
.container {
color: green;
font-family: "Comic Sans MS";
}
Output:
Example 2: The following example demonstrates the use of Less.js Extending Nested Selectors in the Less file.
HTML
<!doctype html>
<head>
<link rel="stylesheet" href="ext.css"
type="text/css" />
</head>
<body>
<div><br><br>
<h1><b>GeeksforGeeks</b></h1>
<h2 class="cont"><b>
Example of Extending Nested Selectors....</b></h2>
<br><br><br>
</div>
</body>
</html>
style. less:
CSS
.style {
.hello {
color: red;
font-size: 50px;
}
}
.cont:extend(.style .hello) {
}
h1 {
color: green;
}
div {
background-color: black;
}
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
.style .hello,
.cont {
color: red;
font-size: 50px;
}
h1 {
color: green;
}
div {
background-color: black;
}
Output:
Reference: https://lesscss.org/features/#extend-feature-extending-nested-selectors
Similar Reads
Less.js Parent Selectors 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
3 min read
Less.js Nested At-Rules and Bubbling Less.js allows you to nest up different at-rules like @media and @supports and it can be done in the same way as the selectors and normal CSS rules like it is shown in nested rules in LESS. The selector directive is set at the top and the various at-rules can be set into a relative order inside the
4 min read
Less.js Mixins Selectors in Mixins Less.js is a popular CSS pre-processor that extends CSS through dynamic actions like variables, nesting, and mixins. Mixins in Less.js allow you to add a range of properties from one set of rules to another. This guide will go into detail on using mixins and how selectors can be used in mixins to cr
4 min read
Less.js Extend Attached to Selector Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is preferable since CSS is a dynamic style sheet language. LESS can be utilized by many different browsers because it is versatile. Web browsers can only use CS
3 min read
Less.js Extend Syntax & Inside Ruleset LESS.js is one of the most popular CSS preprocessor languages because of its many features like mixins, imports, variables, and, so on, which help to reduce the complexity of CSS code. One such important and useful feature of LESS is the @extend directive. In this article, we will see the basic usa
2 min read
Less.js Variables Changing Selector Order LESS (Leaner Style Sheets) is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that enhances the working power of CSS. LESS supports cross-browser compatibility. CSS pre-processor is a s
3 min read