I've found this in a sass/scss
Bootstrap v4 file :
.nav-pills {
.nav-link {
@include border-radius($nav-pills-border-radius);
&.active,
.show > & { /* <-- !!! */
color: $nav-pills-link-active-color;
background-color: $nav-pills-link-active-bg;
}
}
}
I know it usually refers &
to the parent (direct) selector:
.clasePadre {
&.claseHijo {
}
}
Equivalent to .clasePadre.claseHijo
.
So would it be in this case .show > &
equivalent to .show > .nav-pills .nav-link
?
That is: Are all parent selectors inherited with &
?
Yes .
Yes .
According to the official documentation (English):
Translation of webbooks.es :
Example
sass/scss
:The above code
sass/scss
is compiled as follows:The special character
&
is always replaced by the parent selector as it appears in theCSS
. This means that if you have a nested rule, the entire parent selector is calculated first and then replaced with&
.Example
sass/scss
:It compiles into
CSS
: