As at the time of writing (Aug '16), parent selector (&
) always refers to the full parent selector chain right till the top most level. It cannot be used to select just the immediate parent or the root most ancestor alone.
That is, in the below code &#type1
would resolve to #demo-container .content#type1
and not just .content
or just #demo-container
.
#demo-container {
padding: 4px;
border: 1px solid gray;
#heading {
padding: 4px;
font-size: 20px;
}
.content {
padding: 2px;
font-size: 18px;
&#type1 {
color: chocolate;
}
}
}