LESS - nth Expression

Description

The form of nth expression is important in extend, otherwise it treats the selector as different. The nth expression 1n+2 and n+2 are equivalent but extend treats this expression as different.

For instance, create one LESS file with the following code −

:nth-child(n+2) {
   color: #BF70A5;
   font-style: italic;
}
.child:extend(:nth-child(1n+2)){}

When we compile the above code in command prompt then you will get an error message as shown below.

After compiling, you will get the following CSS code.

:nth-child(n+2) {
   color: #BF70A5;
   font-style: italic;
}

In attribute selector, the quote type is not important as you can see it in the following example −

Example

The following example demonstrates the use of the nth expression in the LESS file −

extend_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Hello!!!!!</h2>
      </div>
      <p class = "img">Welcome to TutorialsPoint</p>
   </body>
</html>

Next, create the style.less file.

style.less

[title = tutorialspoint] {
   font-style: italic;
}

[title = 'tutorialspoint'] {
   font-style: italic;
}

[title = "tutorialspoint"] {
   font-style: italic;
}
.style:extend([title = tutorialspoint]) {}
.container:extend([title = 'tutorialspoint']) {}
.img:extend([title = "tutorialspoint"]) {}

You can compile the style.less file to style.css by using the following command −

lessc style.less style.css

Execute the above command; it will create the style.css file automatically with the following code −

style.css

[title = tutorialspoint],
.style,
.container,
.img {
   font-style: italic;
}

[title = 'tutorialspoint'],
.style,
.container,
.img {
   font-style: italic;
}

[title = "tutorialspoint"],
.style,
.container,
.img {
   font-style: italic;
}

Output

Follow these steps to see how the above code works −

Save the above html code in the extend_syntax.htm file.
Open this HTML file in a browser, the following output will get displayed.

less_extend.htm