text: Q:
  
  How to change the color of ngb-tabset type="pills"?
  
  I'm using angular 6 and ng-bootstrap. I want to change the background color of <ngb-tabset type="pills">
  .nav-fill .nav-link.active {
      margin-top: -1px;
      border-top: 2px solid #20a8d8;
  }
  
  .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
      color: #fff;
      background-color: #20a8d8;
  }
  
  I cannot override those in component.scss even if I use !important Those are inline styles. I don't know where they are located, searched the whole project couldn't find them.
  
  A:
  
  Since the pills are in a child component (NgbTabset), you have to use a shadow-piercing descendant combinator to apply the styles. At the present time, Angular recommends using ::ng-deep:
  ::ng-deep .nav-fill .nav-link.active {
      margin-top: -1px;
      border-top: 2px solid #20a8d8;
  }
  
  ::ng-deep .nav-pills .nav-link.active, 
  ::ng-deep .nav-pills .show > .nav-link {
      color: #fff;
      background-color: #20a8d8;
  }
  
  See this stackblitz for a demo.
  
  