CSS Nesting (&) Selector
Example
Use of the nesting (&) selector:
.box {
border: 2px solid green;
background-color: beige;
font-family: monospace;
font-size: 20px;
& > a {
color: green;
&:hover {
color: white;
background-color: salmon;
}
}
}
Try it Yourself »
Definition and Usage
The nesting (&) selector is used to apply styles for an element within the context of another element.
Nesting reduces the need to repeat selectors for related elements.
Example
Before nesting, you had to declare each selector explicitly, separately from one another, like this:
.box {
border: 2px solid green;
background-color: beige;
font-family: monospace;
font-size: 20px;
}
.box > a {
color: green;
}
.box > a:hover {
color: white;
background-color: salmon;
}
Try it Yourself »
Example
After nesting, selectors are continued and the related style rules is grouped within the parent rule:
.box {
border: 2px solid green;
background-color: beige;
font-family: monospace;
font-size: 20px;
& > a {
color: green;
&:hover {
color: white;
background-color: salmon;
}
}
}
Try it Yourself »
Tip: If the .box style in the example above should be removed from your project, you could delete the entire group instead of searching for related selectors.
| Version: | CSS Nesting Module |
|---|
Browser Support
| Selector | |||||
|---|---|---|---|---|---|
| & | 120 | 120 | 117 | 17.2 | 106 |
CSS CSS Syntax
parentrule {
css declarations;
&
childrule {
css declarations; }
}
