Trying to figure out a puzzling aspect of bootstrap 4, I came across this code snippet:
<ul class="nav nav-pills flex-column" id="pills" data-tabsetid="2812">
<li class="active">
<a href="#tab-2812-1" data-toggle="tab" data-value="Load">Load</a>
</li>
<li>
<a href="#tab-2812-2" data-toggle="tab" data-value="Remove">Remove</a>
</li>
</ul>
The links are displayed as pills in a vertical order, which is what I intended. But what's confusing me is that the style rule for the links according to my browser inspect looks like this:
.nav-pills .nav-link, .nav-pills .nav-tabs > li > a, .nav-pills > li > a, .nav-pills
ul.nav.navbar-nav > li > a {
border-radius: 0.25rem;
}
Particularly, it targets .nav-pills > li > a, yet I can't find this rule anywhere in the bootstrap source code, even after considering the scss processing:
//
// Pills
//
.nav-pills {
.nav-link {
@include border-radius($nav-pills-border-radius);
}
.nav-link.active,
.show > .nav-link {
color: $nav-pills-link-active-color;
background-color: $nav-pills-link-active-bg;
}
}
This caught me off guard because I expected it to fail without specifying nav-link, but it still works. How is this happening? Where is this mysterious matching rule defined in the scss?
I am currently on bootstrap version 4.6.3