xxxxxxxxxx
// SCSS code
.parent-element {
color: red;
& .child-element {
color: blue;
// Selecting parent element
&.parent-selected & {
background-color: yellow; // Apply styles to parent element
}
}
}
xxxxxxxxxx
.alert {
// The parent selector can be used to add pseudo-classes to the outer
// selector.
&:hover {
font-weight: bold;
}
// It can also be used to style the outer selector in a certain context, such
// as a body set to use a right-to-left language.
[dir=rtl] & {
margin-left: 0;
margin-right: 10px;
}
// You can even use it as an argument to pseudo-class selectors.
:not(&) {
opacity: 0.8;
}
}
xxxxxxxxxx
.alert
// The parent selector can be used to add pseudo-classes to the outer
// selector.
&:hover
font-weight: bold
// It can also be used to style the outer selector in a certain context, such
// as a body set to use a right-to-left language.
[dir=rtl] &
margin-left: 0
margin-right: 10px
// You can even use it as an argument to pseudo-class selectors.
:not(&)
opacity: 0.8