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 »border: 2px solid green;
background-color: beige;
font-family: monospace;
font-size: 20px;
& > a {
color: green;
&:hover {
color: white;
background-color: salmon;
}
}
}
Definition and Usage
The CSS 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 »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;
}
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 »border: 2px solid green;
background-color: beige;
font-family: monospace;
font-size: 20px;
& > a {
color: green;
&:hover {
color: white;
background-color: salmon;
}
}
}
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; }
}
css declarations;
& childrule {
css declarations; }
}
