Less CSS - SPLessons

Chapter 18

Less Parent Selectors

Less Parent Selectors

This chapter explains about Less parent selectors, its uses, Multiple & Selector, Changing Selector Order, and Combinatorial Explosion. Also, an example is provided illustrating the uses of Less Parent selectors.


In Less, the parent selectors of a nested rule are represented by the ampersand (&) symbol, which is commonly used in an existing selector of a modifying class or pseudo-class.

The below snippet code explains the use of Less Parent selectors.

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

a {
color: red;
}
a:hover {
color: blue;
}

There are many uses of parent selectors in Less. Below example explains a bit typical use of &.

.button {
&-ok {
background-image: url("ok.png");
}
&-custom {
background-image: url("custom.png");
}
&-save {
background-image: url("save.png");
}
&-cancel {
background-image: url("cancel.png");
}
}

.button-ok {
background-image: url("ok.png");
}
.button-custom {
background-image: url("custom.png");
}
.button-save{
background-image: url("save.png");
}
.button-cancel {
background-image: url("cancel.png");
}

Multiple &

The parent selector can be called repeatedly without repeating its name by using the & operator. Also, it can be used more than once within the selector.

.link {
& + & {
color: cyan;
}
& & {
color: blue;
}
&& {
color: green;
}
&, &ish {
color: red;
}
}

.link + .link {
color: cyan;
}
.link .link {
color: blue;
}
.link.link {
color: green;
}
.link, .linkish {
color: red;
}

The operator & also represents the parent selectors in addition to the nearest ancestors as shown in below example.

.grand {
.parent {
& > & {
color: cyan;
}
& & {
color: blue;
}
&& {
color: green;
}
&, &ish {
color: red;
}
}
}

.grand .parent > .grand .parent {
color: cyan;
}
.grand .parent .grand .parent {
color: blue;
}
.grand .parent.grand .parent {
color: green;
}
.grand .parent,
.grand .parentish {
color: red;
}

Changing Selector Order

Place the & after the current selector so that, it prepends a selector to the inherited (parent) selectors.

Below example explains specifies different rules based on supported features by using the Modernizer.

.header {
.menu {
border-radius: 10px;
.no-borderradius & {
background-image: url('images/button-background.png');
}
}
}

.header .menu {
border-radius: 5px;
}
.no-borderradius .header .menu {
background-image: url('images/button-background.png');
}

Combinatorial Explosion

The operator & can also generate every possible permutations of selectors in list separated by commas.

p, a, ul, li {
border-top: 5px dotted #366;
& + & {
border-top: 0;
}
}

Below are the possible 16 combinations of specified elements.

p,
a,
ul,
li {
border-top: 5px dotted #366;
}
p + p,
p + a,
p + ul,
p + li,
a + p,
a + a,
a + ul,
a + li,
ul + p,
ul + a,
ul + ul,
ul + li,
li + p,
li + a,
li + ul,
li + li {
border-top: 0;
}

Example

Below example explains the use of Less Parent Selectors.
The below conceptual diagram represents the overall view of the example like creating .html and .less files in node js folder and compiling .less to .css.
Create a simple HTML file in Nodejs folder as shown below.

Less_parent_selectors.html

<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Parent Selector</title>
</head>
<body>
<h2>Welcome to SPLessons</h2>
<ul>
<li><a>Multiple &</a></li>
<li><a>Changing Selector Order</a></li>
<li><a>Combinatorial Explosion</a></li>  
</ul>
</body>
</html>

Create LESS file in the same Nodejs folder as shown below.

style.less

h2{
color: rgb(75, 75, 200);
}
a {
color: #848484;
&:hover {
background-color: #58FAF4;
}
}

Compile the above less file in command prompt using the following command.

lessc style.less style.css

By compiling the above less file, it automatically generates the CSS as shown below.

style.css

h2 {
color: #4b4bc8;
}
a {
color: #848484;
}
a:hover {
background-color: #58FAF4;
}

After making all the required changes, run the html file in a browser to get the following output.

Summary

  • Symbol ampersand (&) represents nested rules in parent selectors.
  • By using & parent selectors can be used multiple times without changing the name and selectors order.

  • Make sure that both the HTML and LESS files are created in the same node js folder.
  • Check all the required changes in the coding before running the application.