bootstrap 4 change color of nav-pill active

Question

I can assign custom background color for each of the pills, but what I really would like is to have a faded color of each custom one (which is just a matter of changing the values in the above), and have the active color match that full color of corresponding pill.

• pill one > faded red
• pill two > faded blu
• pill three > faded black

When

• pill one active > red
• pill two active > blu
• pill three active > black

my code

<ul class="nav nav-pills">
  <li class="nav-item pill-1">
    <a class="nav-link active" href="#">pill one</a>
  </li>
  <li class="nav-item pill-2">
    <a class="nav-link" href="#">pill two</a>
  </li>
  <li class="nav-item pill-3">
    <a class="nav-link" href="#">pill three</a>
  </li>
</ul>

css

.pill-1 a {
    background-color: rgba(255, 0, 0, 0.5);
}

bootstrap override

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #d9d9d9;
}

Answer 1

Use the appropriate CSS specificity for the active/inactive pills. For example:

https://www.codeply.com/go/Oe6EteovP0

/* not active */
.nav-pills .pill-1 .nav-link:not(.active) {
    background-color: rgba(255, 0, 0, 0.5);
}

.nav-pills .pill-2 .nav-link:not(.active) {
    background-color: rgba(0, 250, 0, 0.5);
}

.nav-pills .pill-3 .nav-link:not(.active) {
    background-color: rgba(0, 0, 250, 0.5);
    color: white;
}


/* active (faded) */
.nav-pills .pill-1 .nav-link {
    background-color: rgba(255, 0, 0, 0.2);
    color: white;
}

.nav-pills .pill-2 .nav-link {
    background-color: rgba(0, 250, 0, 0.2);
}

.nav-pills .pill-3 .nav-link {
    background-color: rgba(0, 0, 250, 0.2);
    color: white;
}