Less Parent selectors

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

Less Parent Selectors

In Less, the parent selectors are denoted by &(ampersand) operator. The parent selectors of a nested rule are represented by & operator and is most commonly used when applying a modifying class or pseudo-class to an existing selector.

A list specifying the types of parent selectors:

Index

Types

Description

1)

Multiple &

The & is used to represent nearest selector and also all the parent selectors.

2)

Changing Selector Order

It is used to change the selector order because prepending a selector to the inherited (parent) selectors is useful when selector ordering is changed.

3)

Combinatorial Explosion

The & operator can also produce all the possible permutation of selectors in a list. The selectors in the list are separated by commas.


Parent Selectors Example

Let's take an example to demonstrate the usage of parent selectors.

Create a HTML file named "simple.html", having the following data.

HTML file: simple.html

  1. <!DOCTYPE html>  

  2. <head>  

  3.   <link rel="stylesheet" href="simple.css" type="text/css" />  

  4.   <title>Parent Selector Example</title>  

  5. </head>  

  6. <body>  

  7. <h2>Courses available on JavaTpoint:</h2>  

  8.  <ul>  

  9.    <li><a>Less</a></li>  

  10.    <li><a>SASS</a></li>  

  11.    <li><a>CSS</a></li>  

  12.    <li><a>Java</a></li>  

  13.    <li><a>Oracle</a></li>  

  14.    <li><a>Hadoop</a></li>  

  15.  </ul>  

  16. </body>  

  17. </html>  

Now create a file named "simple.less". It is similar to CSS file. The only one difference is that it is saved with ".less" extension.

LESS file: simple.less

  1. a {  

  2.   color: blue;  

  3. }  

  4. a:hover {  

  5.   background-color: red;  

  6. }    

 

Put the both file ?simple.html? and ?simple.less? inside the root folder of Node.js

Now, execute the following code: lessc simple.less simple.css

This will compile the "simple.less" file. A CSS file named "simple.css" will be generated.

For example:

The generated CSS "simple.css", has the following code:

  1. a {  

  2.   color: blue;  

  3. }  

  4. a:hover {  

  5.   background-color: red;  

  6. }